vue组件实现简单的路由

首先在当前项目下安装依赖包，运行npm install  vue-router  则package.json中添加了vue-router

此时在src 下的index.js主程序中引入vue-router，同时告诉Vue使用此路由配置

import VueRouter from "vue-router"
Vue.use(VueRouter);

在index.js里面引入需要配置的组件的信息

import Vmain from "@/components/Vmain.vue"
import Vcourse from "@/components/Vcourse.vue"
import Vmarke from "@/components/Vmarke.vue"

实例化一个路由对象，并把配置路由列表传进去，路由可以去除默认的井号配置 mode:"history"

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

把当前路由对象挂载到Vue对象中去，在键值相同的情况下，可以省略用，代替

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

在父组件app.vue里面，如果想用子组件路由，则必须加入 <router-view></router-view>路由出口

然后可以用<router-link to=" ">xxx</router-link> 去替代<a href="">xxx</a>

默认会加载出 "/"对应的路由