vue路由知识点

创建路由，引入vue-router自带的VueRouter类：

let router = new VueRouter();

在路由映射表中注册组件：

let routes = [  
    {path:"/home",component:home},
    {path:"/list",component:list},
];

默认展示的路由：

{path:"/",component:home}, //默认展示的路由

输入错误地址展示的路由：

{path:"*",redirect:"/home"},  //输入错误地址的时候展示的页面

代码展示：

let home = {
    template:`<div>首页 <button @click="golist">去列表</button></div>`,
    methods:{
        golist(){
            this.$router.push("/list")
        }
    }
};
let list = {
    template:`<div>列表页 <button @click="back">返回</button></div>`,
    methods:{
        back(){
            this.$router.go(-1)
        }
    }
};
let routes = [  //路由映射表 配置路径和组件的关系
    {path:"/",component:home}, //默认展示的路由
    {path:"/home",component:home},
    {path:"/list",component:list},
    {path:"*",redirect:"/home"},  //输入错误地址的时候展示的页面
];
let router = new VueRouter({  //引入vue-router自带的VueRouter类
    routes,
    // mode:"history",
    linkActiveClass:"active"  //改变router-link的默认类名
});
new Vue({
    el:"#app",
    router
})

获取以下路由参数a：{{ path:"/home/:a" , component:home}}     通过  this.$route.params.a 即可获得！