Vue-路由（route）
vue-router 理解
Vue中的一个插件库，专门用来实现SPA（single page web application）应用
SPA应用
- 单页面应用（single page web application，SPA）。
- 整个应用只有一个完整的页面。
- 页面不出现跳转和整体刷新，只是局部刷新。
- 数据需要通过ajax请求获取
路由
定义
- 一个路由就是一组映射关系（key-value）。
- key为路径，value可能是function或component。
分类
- 后端路由
- 定义：value是function，用于处理客户端提交的请求。
- 工作过程：服务器收到一个请求是，根据请求路径找到匹配的函数来处理请求，返回响应数据。
- 前端路由
- 定义：value是component，用于页面内容渲染。
- 工作过程：当浏览器的路径发生改变时，对应的组件会被渲染。
基本使用
- 安装vue-router
npm i vue-router@3
npm i vue-router
yarn add vue-router@3
- 引入和应用
import VueRouter from '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
},
]
})
- 实现切换
router-link（active-class可配置高亮样式）
<router-link to="/about" class="list-group-item" active-class="active">About</router-link>
- 指定展示位置
router-view
<router-view></router-view>
注意：
- 路由组件通常放在
pages文件夹，一般组件通常放在components文件夹。 - 通过切换，隐藏了的路由组件，默认是被销毁的，需要时再去挂载。
- 每个路由组件都有自己的
$route属性，存储着自己的路由信息。 - 整个应用只有一个
router，可以通过组件的$router属性获取到。
main.js
import Vue from "vue";
import App from "./App"
import VueRouter from 'vue-router'
import router from './router'
Vue.config.productionTip = false
Vue.use(VueRouter)
new Vue({
render: h => h(App),
router: router,
}).$mount("#app");
App.vue
<template>
<div>
<div class="row">
<div class="col-xs-offset-2 col-xs-8">
<div class="page-header"><h2>Vue路由案例（Vue Router Demo）</h2></div>
</div>
</div>
<div class="row">
<div class="col-xs-2 col-xs-offset-2">
<div class="list-group">
<!-- 原多页面方式跳转方式 -->
<!-- <a href="./about.html" class="list-group-item active">About</a>
<a href="./home.html" class="list-group-item">Home</a> -->
<!-- Vue中借助router-link标签实现路由的切换 -->
<router-link to="/about" class="list-group-item" active-class="active">About</router-link>
<router-link to="/home" class="list-group-item" active-class="active">Home</router-link>
</div>
</div>
<div class="col-xs-6">
<div class="panel">
<div class="panel-body">
<!-- 此处展示组件靠用户点击的导航决定 -->
<!-- 指定组件的呈现位置 -->
<router-view></router-view>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'App',
}
</script>
router/index.js
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
},
]
})
About.vue
<template>
<h2>我是About的内容</h2>
</template>
<script>
export default {
name: "About",
}
</script>
Home.vue
<template>
<h2>我是Home的内容</h2>
</template>
<script>
export default {
name: "Home",
}
</script>
路由嵌套
- 配置路由规则，使用
children配置项
routes: [
{
path: "/about",
component: About
},
{
path: "/home",
component: Home,
children:[
{
path: 'news',
component: News,
},
{
path: 'message',
component: Message
}
]
},
]
- 跳转需要写完整路径，依旧使用
router-link标签，显示使用<router-view></router-view>标签
<router-link to="/home/message" class="list-group-item" active-class="active">Message</router-link>
路由传参
query参数
-
传递参数
<router-link :to="`path?key1=value1&key2=value2....`">{{message.title}}</router-link>
<router-link :to="{
path:'path',
query: {
key1: value1,
key2: value2
}
}">
{{m.title}}
</router-link>
- 接收参数
$route.query.key
命名路由
-
作用：简化路由跳转 -
使用：
routes: [
{
name: 'about',
path: "/about",
component: About
},
{
name: 'home',
path: "/home",
component: Home,
children:[
{
path: 'news',
component: News,
},
{
path: 'message',
component: Message,
children: [
{
name: 'messageDetail',
path: 'detail',
component: Detail,
}
]
}
]
},
]
- **使用：**需要使用对象方式配置路径，将
path替换成name:配置名
<router-link :to="{
name:'messageDetail',
query: {
id: m.id,
title: m.title
}
}">
{{m.title}}
</router-link>
params参数
- 配置路由，声明接收params参数
routes: [
{
name: 'about',
path: "/about",
component: About
},
{
name: 'home',
path: "/home",
component: Home,
children:[
{
path: 'news',
component: News,
},
{
path: 'message',
component: Message,
children: [
{
name: 'messageDetail',
path: 'detail/:id/:title',
component: Detail,
}
]
}
]
},
]
-
传递参数
<router-link :to="`/home/message/detail/value1/value2`">...</router-link>
<router-link :to="{
name:'messageDetail',
params: {
key1: value1,
key2: value2,
...
}
}">
{{m.title}}
</router-link>
- 接收参数：
$route.params.key
注意：路由携带params参数时，如果使用对象写法，不能使用path配置项，必须使用name
路由的props
作用：让路由组件更方便的接收到参数
- **对象写法：**对象写法，该对象中的所有key-value都会以props形式传递给Detail组件
{
name: 'messageDetail',
path: 'detail',
component: Detail,
props: {
key1: value1,
key2: value2
},
}
- **boolean写法：**如果值为真，就会把该路由组件收到的
params参数，以props形式传递给对应组件
{
name: 'messageDetail',
path: 'detail',
component: Detail,
props: true,
}
- **函数写法：**返回对象中的每一组key-value都会通过props传给对应组件
{
name: 'messageDetail',
path: 'detail',
component: Detail,
props({query:{id, title}}) {
return { id: id, title: title }
},
}
- 接收：
props:["key1", "key2"]
router-link的replace属性
- **作用：**控制路由跳转时操作浏览器历史记录
- 浏览器的历史记录有两种写法（默认为push）:
push：追加历史记录（压栈）replace：替换当前记录
- 开启方式
replace模式：<router-link replace ... >...</router-link>
编程式路由导航
作用： 不借助<router-link>实现路由跳转
$router.back()：后退$router.forward()：前进$router.go(3)：前进/后退指定步数（整数为前进，负数为后退）$router.push：push方式跳转路由（有痕）$router.replace：replace方式跳转路由（无痕）
methods: {
back() {
this.$router.back();
},
forward() {
this.$router.forward();
},
testGo() {
this.$router.go(3);
}
pushShow(m) {
this.$router.push({
name:'messageDetail',
query: {
id: m.id,
title: m.title
}
});
},
repalceShow(m) {
this.$router.replace({
name:'messageDetail',
query: {
id: m.id,
title: m.title
}
});
},
},
缓存路由组件
-
作用： 让不展示的路由组件保持挂载，不被销毁 -
使用： 使用<keep-alive></keep-alive>标签包裹<router-view></router-view>
<keep-alive></keep-alive>，所有被包裹的<router-view></router-view>中展示的组件被缓存<keep-alive :include="['组件名',...]"></keep-alive>指定的组件被缓存
<keep-alive include="News">
<router-view></router-view>
</keep-alive>
|