路由的使用大致分为四步
路由即一个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里面
