一、vue-router命名路由
1.什么是命名路由
给路由规则起一个别名，即为 “命名路由”
const router = new VueRouter({
routes: [
{
path: '访问路径',
// 别名代表当前路由规则，即 {} 内定义的路由规则
name: '组件别名',
component: 组件名
}
]
})
<router-link :to="{ name: '组件别名', params: { 参数列表 }}">组件名</router-link>2.代码示例
<!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">
<!--通过 to 标签 中的 params 传递值-->
<router-link :to="{ name: 'user', params: {id: 1, my_name: '小强'} }">User组件</router-link>
<!-- 路由占位符 -->
<router-view></router-view>
</div>
<script>
const User = {
props: ['id', 'my_name'],
template: '<h1>用户id为: {{id}} -- 姓名为:{{my_name}}</h1>'
}
// 创建路由实例对象
const router = new VueRouter({
// 所有的路由规则
routes: [
{
// 命名路由
name: 'user',
path: '/user',
component: User,
// 通过 route.params 获取传递来的值
props: route => ({ my_name: route.params.my_name, id: route.params.id})
}
]
})
// 创建 vm 实例对象
const vm = new Vue({
// 指定控制的区域
el: '#app',
data: {},
// 挂载路由实例对象
// router: router
router
})
</script>
</body>
</html>
二、编程式导航
- this.$router.push('hash地址') ===> 跳转页面
- this.$router.go(n) ===> 前进/后退 页面
// 字符串(路径名称)
router.push('/home')
// 对象
router.push({ path: '/home' })
// 命名的路由(传递参数)
router.push({ name: '/user', params: { userId: 123 }})
// 带查询参数，变成 /register?name=xiaohong
router.push({ path: '/register', query: { name: 'xiaohong' }})示例代码
<!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="{ name: 'user', params: {id: 1, my_name: '小珍'} }">User3</router-link>
<router-link to="/admin">管理界面</router-link>
<!-- 路由占位符 -->
<router-view></router-view>
</div>
<script>
const User = {
props: ['id', 'my_name'],
template: `
<div>
<h1>用户id为: {{id}} -- 姓名为:{{my_name}}</h1>
<button @click="goAdmin">跳转到管理界面</button>
</div>`,
methods: {
goAdmin() {
// 跳转指定页面
this.$router.push('/admin')
}
},
}
const Admin = {
template: `
<div>
<h1>管理界面</h1>
<button @click="goBack">后退</button>
</div>`,
methods: {
goBack() {
// 回退到上一个路由导航页面
// go函数传正数，则代表前进 n 步，传负数，则代表后退 n 步
this.$router.go(-1)
}
},
}
const router = new VueRouter({
routes: [
{
name: 'user',
path: '/user',
component: User,
// 在路由中利用函数传参
props: route => ({my_name: route.params.my_name, id: route.params.id})
},
{
path: '/admin',
component: Admin
}
]
})
const vm = new Vue({
el: '#app',
data: {},
router
})
</script>
</body>
</html>