语法
// vue@2.6.0, vue-router@3.0.7 new VueRouter({ routes: [ {name: 'test', path: '/test', component: test} ] })
DEMO
HTML 代码
// ...
<router-link to="/login">登陆</router-link>
<router-link to="/register">注册</router-link>
<router-link to="/redirect-login">重定向1</router-link>
<router-link to="/redirect-register">重定向2</router-link>
// ...
JS 代码
// 定义组件
let login = {
template: '<h1>登陆组件</h1>'
}
let register = {
template: '<h1>注册组件</h1>'
}
// 定义路由
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
})
