路由的基本使用
介绍
理解：一个路由（route）就是一组映射关系（key-value），多个路由需要路由器（router）进行管理。
前端路由：key是路径，value是组件
基本使用
安装vue-router，命令：npm install --save vue-router
应用插件：Vue.use(VueRouter)
编写router配置项：
// 该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";
import About from '../components/About';
import Home from '../components/Home';
export default new VueRouter({
routes:[
{
path: '/about',
component: About,
},
{
path: '/home',
component: Home,
},
]
})
实现切换（active-class可以配置高亮样式）
<!-- Vue中借助router-link标签实现路由的切换 -->
<router-link class="list-group-item" active-class="active" to="/about">About</router-link>
<router-link class="list-group-item" active-class="active" to="/home">Home</router-link>
指定展示位置
<!-- 指定组件的呈现位置 -->
<router-view></router-view>
几个注意点
路由组件通常存放在pages文件夹，，一般组件通常放在components文件夹中。
通过切换，‘隐藏’的路由组件默认是被销毁的，需要的时候再去挂载
每个组件都有自己的$route属性，里面存放自己的路由信息
整个应用只有一个router，可以通过组件的$router属性获取
多级路由
配置路由规则，使用children配置项
routes:[
{
path: '/home',
component: Home,
children: [
{
path: 'news',
component: News,
},
]
},
]
跳转（填写完整路径）
<router-link class="list-group-item" active-class="active" to="/home/news">News</router-link>
路由的query参数
传递参数
<!-- 跳转路由并携带query参数，to的字符串写法 -->
<router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}&views=${m.views}`">{{m.title}}</router-link>
<!-- 跳转路由并携带query参数，to的对象写法 -->
<router-link :to="{
path: '/home/message/detail',
query: {
id: m.id,
title: m.title,
views: m.views
}
}">
{{m.title}}
</router-link>
接受参数：
$route.query.id
$route.query.title
$route.query.views
命名路由
作用：可以简化路由的跳转
如何使用：
给路由命名
routes:[
{
path: '/home',
component: Home,
children: [
{
path: 'message',
component: Message,
children: [
{
name: 'msg-d',
path: 'detail',
component: Detail,
}
]
},
]
},
]
简化跳转
<!-- 简化前 -->
<!-- 跳转路由并携带query参数，to的对象写法 -->
<router-link :to="{
path: '/home/message/detail',
query: {
id: m.id,
title: m.title,
views: m.views
}
}">
{{m.title}}
</router-link>
<!-- 简化后 -->
<!-- 跳转路由并携带query参数，to的对象写法 -->
<router-link :to="{
path: 'msg-d',
query: {
id: m.id,
title: m.title,
views: m.views
}
}">
{{m.title}}
</router-link>
路由的params参数
配置路由：声明接受params参数
{
path: '/home',
component: Home,
children: [
{
path: 'news',
component: News,
},
{
path: 'message',
component: Message,
children: [
{
name: 'msg-d',
path: 'detail/:id/:title/:views', // 使用占位符接受params参数
component: Detail,
}
]
},
]
},
传递参数
<!-- 跳转路由并携带query参数，to的字符串写法 -->
<router-link :to="`/home/message/detail/${m.id}/${m.title}/${m.views}`">{{m.title}}</router-link>
<!-- 跳转路由并携带query参数，to的对象写法 -->
<router-link :to="{
name: 'msg-d', // 这种写法必须使用name配置
params: {
id: m.id,
title: m.title,
views: m.views
}
}">
{{m.title}}
</router-link>
接受参数：
$route.params.id
$route.params.title
$route.params.views
路由的props配置
作用：让路由组件更方便的收到参数（query、params）
{
path: 'message',
component: Message,
children: [
{
name: 'msg-d',
path: 'detail/:id/:title/:views',
component: Detail,
// props的第一种写法，值为对象。该对象的所有key-value都会以props的形式传给当前组件中
props: {a:1, b:2}, // 固定值
// props的第二种写法，值为boolean。就会把该路由组件收到的所有params参数，以props的形式传给当前组件中，即在组件中配置props属性接受键值
// props:true,
// props的第三种写法，值为function。就会把该路由组件收到的所有params参数，以props的形式传给当前组件中，即在组件中配置props属性接受键值
props($route) {
return {
id: $route.params.id,
title: $route.params.title,
views: $route.params.views,
}
},
// props({params:{id, title, views}}) { // 不推荐，不易于理解
// return {
// id, title, views,
// }
// },
}
]
},本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！