Vue Router 路由重定向-笔记

语法

// [email protected], [email protected]
new VueRouter({
   routes: [
       {name: 'test', path: '/test', component: test}
   ]
})

DEMO

HTML 代码

// ...
登陆
注册
重定向1
重定向2
// ...

JS 代码

// 定义组件
let login = {
    template: '
登陆组件
'
}
let register = {
    template: '
注册组件
'
}

// 定义路由
const router = new VueRouter({
    /* 
        路由匹配规则数组，每个元素对象必须包含两个属性(path, <组件>)
        0.name 路由名(可选)
        1.path 监听的路由链接地址
        2.component 组件，属性值为组件对象
     */
    routes: [
        {
            path: '/login',
            component: login
        },
        {
            name: 'register2', // 定义路由名，与下方重定向对象方式的name属性对应
            path: '/register',
            component: register
        },
        // 重定向
        {
            path: '/redirect-login',
            redirect: '/login'
        },
        {
            path: '/redirect-register',
            // 重定向的目标也可以是一个命名的路由：name 指向路由规则中指定了name属性的对象
            // PS: 官方文档中此处 name 属性为 'foo'，却未说明 foo 的指向，笔者学习时翻阅许久算是一个坑
            redirect: {name: 'register2'}
        },
    ],
    // 设置连接激活的样式名替换默认类名(css代码略)
    linkActiveClass: 'myactive'
})

let vm = new Vue({
    el: '#app',
    data: {},
    methods: {},
    router: router
})

官方文档