Vue的路由vue-router

路由的使用大致分为四步

路由即一个url地址对应一个组件
1.书写路由的配置文件
2.在new Vue实例里面注入router
3.在需要跳转的视图里面写router-link标签
4.在需要显示路由进来的组件的地方写router-view标签

第一步：书写路由的配置文件

  import Vue from "vue";
  import VueRouter from "vue-router";
  import index from "@/views/index";
//如果import引来的变量不是export default输出的值，必须用大括号{}
  import {a} from "./router"

引入文件，import引入的地址只有名字，没有路径，说明它是node_module里面的包

  Vue.use(VueRouter);

在组件化工程里面，必须要这一步

 export default new VueRouter({
    mode:"history",
    routes:[
    //默认路由
    {path:"/",component:filmList},
    {path:"/filmList/:id",component:filmList,props:true},
    //普通路由
    {
        path:"/index",
        component:index,
        children:[
        //子路由的路径前不要加斜线，因为斜线表示根目录的意思
        {path:"about",component:about}
        ]
    },
        //可以通过watch监听动态路由的参数变化
    //动态路由
    {path:"/list/:name",component:list,props:true},
    ]
})

第三步

  <router-link to='/index'>点击跳转到index</router-link>

点击router-link可以连接到index组件；vue路由的跳转其实是锚点跳转

第四步

  <router-view></router-view>

index组件链接进来后要显示在位置在router-view里面