1.首先我们要引入vue文件和vue-router文件，可以用在线的cnd链接
会在全局暴露VueRouter这个方法,
- 然后我们要定义好待显示的组件
var Home={
template:`home组件
`
}
var About={
template:`About组件
`
}
- 定义好路由映射关系
var routes=[//路线
//路由表。里面很多路由规则，component：组件名，path路径,数组，里面是一个个对象
{path:'/home',component:Home,name:'home'},
{path:'/about',component:About,name:'about'},
{path:'',component:Home,name:'index'},//默认访问时的组件,但是传统是a链接跳转，底层是锚点
]
- 实例化路由器
var router=new VueRouter({
routes:routes,//路由器,属性名属性值一致可以简写成一个
})//参数为路由映射表
- 注册路由器
var vm = new Vue({
el: '#box',
router:router,//注册路由器，可以简写成一个
})
- 在实例化的地方box，显示
打开页面后啥也没有，但是地址栏会出现
//看到这样已经配置成功
// http://localhost:63342/code/myWorks/mytest/thirdWeek/day2/pmVueRouterTest/vueRouter.html?_ijt=3slbjgsnnnmv6h51omuqds3qdc#/
/**
* 在尾部加home,about可以显示相应的内容，但是应该是在页面初次加载就显示，而不是手动地址栏输入
* */
那我们就加上a标签好了。
这样就能点到哪里跳哪里。但是a标签局限还是有的，我们可以用vue-router给我们的一个标签router-link。
这个标签还挺神奇的，
2 3
image.png
你可以通过修改这个改变它被点击时候的样式，若你不想用这个名字
也可以另外设置点击时候的class名
var router=new VueRouter({
routes:routes,//路由器,可以简写成一个
//还可以自定义点击时候样式的类名
linkActiveClass:'active'
})//参数为路由映射表
这个active的这个类，就随你在css设置样式了。
- 假如给home加上二级菜单呢？同时我点中哪个就要给我传值过来。
var Home={
template:``
比如我要点击哪个选项，就会给我在当前页输出这个id，那我来定义一下，点击二级菜单时候会出现的页面是什么样的
//$route模型变量是vue-router封装好的，主键实例对象就存在，route.params获取动态路由相关参数，id取决于之前明明
var detral={
template:`新闻峡谷情 id=
`
}
然后在设置一条路由
{path:'/home/aa/:id/',component:detral,name:'aa'}
//此时：id的这个名称随意，但是一定要冒号。这里设置名称叫id，这里的id为路由动态参数
然后再定义的模板里面拿到这个参数
//$route模型变量是vue-router封装好的，主键实例对象就存在，route.params获取动态路由相关参数，id取决于之前明明
var detral={
template:`新闻峡谷情 id={{$route.params.id}}
`
}
同样你可以设置多个参数
var Home={
template:``
路由表里面
{path:'/home/aa/:id/:type',component:detral,name:'aa'}
模板修改
var detral={
template:`新闻峡谷情 id={{$route.params.id}}{{$route.params.type}}
`
}
这个时候做完你会发现一个小bug，它点击之后是渲染在一级菜单管理下的区域，会覆盖的，所以我们只想让它在特定区域显示的话只能通过路由嵌套了。
模板改成这样
var Home={
template:``
路由改写,嵌套一个子路由
{path:'/home',component:Home,name:'home',children:[
//这个path不能加上/，因为它将这个path和父级的/home拼接,嵌套路由,让它在该显示的地方显示
{ path:'aa/:id/:type',component:detral,name:'aa'},
]},
如果我们想要在about这个模板有个摁扭，是返回前一页呢？就不能用嵌套路由了把，这个。这个时候就要用路由函数了
var About={
methods:{
goback:function () {
//跳转到home
// this.$router.push('/home');//会跳转到home，路由参数是$route.params
//push的路由参数是路由表里面的path
// this.$router.back();//后退一步，自带的，从哪来，回哪去
// this.$router.go();//history证书向前,负数向后,有问题
}
},
template:`About组件
`
}
绑定摁扭的事件后再methods里面设置$router自带的函数。