一、路由重定向
1.定义
用户在访问地址 A 的时候，强制用户跳转到地址 C ，从而展示特定的组件页面
2.解决方案
通过路由规则的 redirect 属性，指定一个新的路由地址，可以很方便地设置路由的重定向
let router = new VueRouter({
routes: [
// 其中， path 表示需要被重定向的原地址， redirect 表示将要被重定向到的新地址
{path:'/', redirect: '/user'},
{path:'/user',component: User},
]
})
3.示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<!-- 导入 vue 文件 -->
<script src="../../js/vue.js"></script>
<script src="../../js/vue-router.js"></script>
</head>
<body>
<!-- 被 vm 实例所控制的区域 -->
<div id="app">
<router-link to="/user">User</router-link>
<router-link to="/register">Register</router-link>
<!-- 路由占位符 -->
<router-view></router-view>
</div>
<script>
const User = {
template: '<h1>User 组件</h1>'
}
const Register = {
template: '<h1>Register 组件</h1>'
}
const router = new VueRouter({
routes: [
// 强制用户初始化时进入 /user 界面
{ path: '/', redirect: '/user'},
{ path: '/user', component: User },
{ path: '/register', component: Register }
]
})
const vm = new Vue({
el: '#app',
data: {},
router
})
</script>
</body>
</html>
二、嵌套路由
1.嵌套路由功能分析
点击父级路由链接显示模板内容
模板内容中又有子级路由链接
点击子级路由链接显示子级模板内容
2.图解
3.示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>Document</title>
<!-- 导入 vue 文件 -->
<script src="../../js/vue.js"></script>
<script src="../../js/vue-router.js"></script>
</head>
<body>
<!-- 被 vm 实例所控制的区域 -->
<div id="app">
<router-link to="/one">One</router-link>
<router-link to="/two">Two</router-link>
<!-- 路由占位符 -->
<!-- 控制组件的显示位置 注意：这里是显示自己组件的占位符，并不是子组件占位符 -->
<router-view></router-view>
</div>
<script>
const One = {
template: '<h1>父组件一</h1>'
}
const Two = {
<!-- 路由占位符 -->
<!-- 控制组件的显示位置 注意：这里是显示自己组件的占位符，并不是子组件占位符 -->
template: `<div>
<h1>父组件二</h1>
<hr/>
<router-link to="/two/son1">子组件一</router-link>
<router-link to="/two/son2">子组件二</router-link>
<router-view></router-view>
</div>`
}
const Son1 = {
template: '<h3>子组件1</h3>'
}
const Son2 = {
template: '<h3>子组件2</h3>'
}
// 创建路由实例对象
const router = new VueRouter({
// 所有的路由规则
routes: [
{path: '/', redirect: '/one'},
{path: '/one', component: One},
// children 数组表示子路由规则
{
path: '/two', component: Two, children: [
{path: '/two/son1', component: Son1},
{path: '/two/son2', component: Son2}
]
}
]
})
// 创建 vm 实例对象
const vm = new Vue({
// 指定控制的区域
el: '#app',
data: {},
// 挂载路由实例对象
// router: router
router
})
</script>
</body>
</html>