vue-router使用

一、注册vue-router

import VueRouter from 'vue-router'

Vue.use(VueRouter);

二、创建 router 实例并routes 定义路由

const router = new VueRouter({
  mode:"history",
  routes: [
    { path: "/", component: Vmain },
    { path: "/markedown", component: Vcontent },
  ]
})

三、定义（路由）组件

　　导入

import Vcontent from './components/Vcontent'
import Vmain from './components/Vmain'

四、创建和挂载根实例

new Vue({
  el: '#app',
  router ,
  components: { App },
  template: '<App/>'
})

五、HTML使用

<template>
  <div class="app">
    <router-link to="/">首页</router-link>
    <router-link to="/markedown">marked</router-link>

    <router-view></router-view>
  </div>
</template>

 

注意问题：

　　1、创建router和挂载时，关键字router一定不能错

　　2、定义路由时，routes关键子一定一定不能错

　　3、路由出口<router-view></router-view>一定一定要写