Vue.js 生态之 Vue-Router

vue-router 是 Vue的路由系统，定位 资源的，我们不可以进行整页刷新去切换页面内容。

vue-router的安装和基本配置

vue-router.js 可以下载 也可以用cdn的，配置信息如下

// html 代码

    

        首页
        关于我们
    
    

        
    






// js 代码
var routes = [
    {
        path: "/",
        component: {
            template: `
首页
`
        }
    },
    {
        path: "/about",
        component: {
            template: `
关于我们
`
        }
    }
]

var router = new VueRouter({
    routes: routes,
    // 路由去掉#
    // mode: 'history',
});

var app = new Vue({
    el: '#app',
    router: router,
});

路由的一些方法

路由传参以及获取参数

// html 代码

    

        首页
        关于我们
        琴女
        提莫
    
    

        
    

// js 代码
var routes = [
    {
        path: "/",
        component: {
            template: `
首页
`
        }
    },
    {
        path: "/about",
        component: {
            template: `
关于我们
`
        }
    },
    {
        path: "/user/:name",
        component: {
            template: `

                      
我是:{{$route.params.name}}
                      
我年龄是:{{$route.query.age}}
                    
`,
        }
    }
]

var router = new VueRouter({
    routes: routes,
});

var app = new Vue({
    el: '#app',
    router: router,
});

命名路由

// html代码

    

        首页
        关于我们
        gaoxin
    
    

        
    

// js代码
let routes = [
        {
            path: '/',
            component: {
                template: `
这是主页
`
            }
        },
        {
            path: "/about",
            name: "about",
            component: {
                template: `
关于我们
`
            }
        },
        {
            path: "/user/:name",
            component: {
                template: `

                            
我是{{$route.params.name}}
                           
我的年龄是{{$route.query.age}}
                            
                          `
            }
        }
    ];

    let router = new VueRouter({
        routes: routes,
        mode: "history"
    });

    const app = new Vue({
        el: "#app",
        router: router,
        mounted(){
            console.log(this.$route)
            console.log(this.$router)
        }
    })

子路由

// 添加子路由变化的只有父级路由 
// 基于上面的例子增加
// js 代码
{
        path: "/user/:name",
        component: {
            template: `

                      
我是:{{$route.params.name}}
                      
我年龄是:{{$route.query.age}}
                      更多信息
                      
                    
`,
        },
        children: [
            {
            path: "more",
            component: {
                template: `

                      {{$route.params.name}}的详细信息
                
`,
            }
        }
        ]

    },

手动访问路由，以及传参

// 基于上面例子追加
// html 代码

    

        首页
        关于我们
        琴女
        提莫
        // 添加一个button按钮
        旅游
    
    

        
    
    
// js 代码
// 注意路由name的使用 这是在原例子追加
var app = new Vue({
    el: '#app',
    router: router,
    methods: {
        on_click: function () {
            setTimeout(function () {
                this.$router.push('/about')
                setTimeout(function () {
                    this.$router.push({name: "user", params:{name: "琴女"},query:{age: 20}})
                }, 2000)
            }, 2000)
        }
    }
});

命名路由视图 router-view
当我们只有一个的时候_{所有内容都展示在这一个面板里面}

如果是content 和 footer 就需要同时显示并且不同区域~这就需要对视图进行命名

// html 代码

    

        首页
        
    
    

        
        
    


// js 中的主要代码
var routes = [
    {
        path: "/",
        components: {
            content: {
                template: `
首页
`,
            },
            footer: {
                template: `
关于我们
`,
            }
        }
    },
]

错误路由的重定向

let routes = [
     {
            path: "**",
            redirect: "/"
        }   
]

router的区别~~

-- $route为当前router调转对象，里面可以获取name, path, query, params等~

-- router.push方法等~~

路由的钩子

路由的生命周期就是从一个路由跳转到另一个路由整个过程。下面介绍两个钩子函数：
router.beforeEach()
router.afterEach()

路由钩子：

// html 代码

    首页
    登录
    用户管理
    

        
    

//  js 代码
var routes = [
    {
        path: "/",
        component: {
            template: "
首页
"
        }
    },
    {
        path: "/login",
        component: {
            template: "
登录
"
        }
    },
    {
        path: "/user",
        component: {
            template: "
用户管理
"
        }
    }
];
var router = new VueRouter({
    routes: routes
});

router.beforeEach(function (to,from,next) {
    // console.log(to)
    // console.log(from)
    // console.log(next)
    // next(false)
    if(to.path=="/user"){
        next("/login")
    }
    else {
        next();
    }
});
router.afterEach(function (to, from) {
    console.log(to)
    console.log(from)
});

var app = new Vue({
    el: '#app',
    router: router
});

next 参数详解

next：function 一定要调用这个方法来resolve这个钩子函数。
执行效果依赖next方法的调用参数
next() 什么都不做继续执行到调转的路由
next(false) 中断当前导航 没有跳转 也没有反应
next("/") 参数是路径 调转到该路径
next(error) 如果next参数是一个Error实例 导航终止该错误
会传递给router.onError()注册过的回调中

匹配子路由以及元数据配置

// 匹配子路由 改一下匹配方法就可以~
// js 改动代码
router.beforeEach(function (to,from,next) {
    // console.log(to)
    // console.log(from)
    // console.log(next)
    // next(false)
    if(to.matched.some(function (item) {
            return item.path == "/post"
        })){
        next("/login")
    }
    else {
        next();
    }
});
// 元数据配置 改动代码
// html 部分
 {
        path: "/user",
        meta: {
            required_login: true,
        },
        component: {
            template: `
                

                
用户管理
                vip
                
                
                `
        },
        children: [{
            path: "vip",
            meta: {
              required_login: true,
            },
            component: {
                template: '
VIP
'
            }
        }]
    }
// js 部分
router.beforeEach(function (to,from,next) {
    // console.log(to)
    // console.log(from)
    // console.log(next)
    // next(false)
    if(to.meta.required_login){
        next("/login")
    }
    else {
        next();
    }
});