1. Routing Introduction
What is routing?
- A route is a set of mapping relationships (key - value)
- key is path, value may be function or component
2. Basic routing:
2.1 Basic usage
Download vue-router:npm i vue-router@3
Create a new file to specifically put the configuration options of the router:
src/router/index.js
//该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";
//引入组件
import Home from '../components/Home'
import About from '../components/About'
//创建并暴露一个路由器
export default new VueRouter({
routes:[
{
path:'/about',
component:About
},
{
path:'/home',
component:Home
}
]
})
src/main.js
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import router from './router'
Vue.config.productionTip = false
Vue.use(VueRouter)
new Vue({
el:"#app",
render: h => h(App),
router
})
src/components/Home.vue:
<template>
<h2>我是Home组件的内容</h2>
</template>
<script>
export default {
name:'Home'
}
</script>
src/components/About.vue:
<template>
<h2>我是About组件的内容</h2>
</template>
<script>
export default {
name:'About'
}
</script>
Summarize:
- Application plugin: Vue.use(VueRouter)
- Write configuration items (index.js)
- Implement switching (active-class can configure the highlighting style):
- Specify placement (<router-view></router-view>)
2.2 Precautions
- Routing components are generally placed in the pages folder, and general components are generally placed in the components folder
- By switching, the hidden routing component is destroyed ten times by default and reloaded when needed
- The entire application has only one router, which can be obtained through the $router property of the component
3. Multi-level routing
src/router/index.js
//该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";
//引入组件
import Home from '../pages/Home'
import About from '../pages/About'
import News from '../pages/News'
import Message from '../pages/Message'
//创建并暴露一个路由器
export default new VueRouter({
routes:[
{
path:'/about',
component:About
},
{
path:'/home',
component:Home,
children:[
{
path:'news',
component:News
},
{
path:'message',
component:Message
}
]
}
]
})
Effect:
Summarize:
- Configure routing rules: the children configuration item is required for secondary routing, etc.
- Jump: to be written as a complete path
4. The query parameter of the route
src/pages/Detail.vue:
<template>
<ul>
<li>消息编号：{
{$route.query.id}}</li>
<li>消息标题：{
{$route.query.title}}</li>
</ul>
</template>
<script>
export default {
name:'Detail'
}
</script>
src/pages/Message.vue:
<template>
<div>
<ul>
<li v-for="m in messageList" :key="m.id">
<!-- 跳转路由并携带query参数，to的字符串写法 -->
<!-- <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">
{
{m.title}}
</router-link> -->
<!-- 跳转路由并携带query参数，to的对象写法 -->
<router-link :to="{
path:'/home/message/detail',
query:{
id:m.id,
title:m.title
}
}">
{
{m.title}}
</router-link>
</li>
</ul>
<hr/>
<router-view></router-view>
</div>
</template>
<script>
export default {
name:'News',
data(){
return{
messageList:[
{id:'001',title:'消息001'},
{id:'002',title:'消息002'},
{id:'003',title:'消息003'}
]
}
}
}
</script>
Effect:
Summarize:
Pass parameters:
<!-- 跳转并携带query参数，to的字符串写法 -->
<router-link :to="/home/message/detail?id=666&title=你好">跳转</router-link>
<!-- 跳转并携带query参数，to的对象写法 -->
<router-link :to="{
path:'/home/message/detail',
query:{
id:666,
title:'你好'
}
}">跳转</router-link>
Receive parameters:
$route.query.id
$route.query.title
5. Naming Routes
src/pages/Message.vue:
<template>
<div>
<ul>
<li v-for="m in messageList" :key="m.id">
<!-- 跳转路由并携带query参数，to的字符串写法 -->
<!-- <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">
{
{m.title}}
</router-link> -->
<!-- 跳转路由并携带query参数，to的对象写法 -->
<router-link :to="{
//使用name进行跳转
name:'xiangqing',
query:{
id:m.id,
title:m.title
}
}">
{
{m.title}}
</router-link>
</li>
</ul>
<hr/>
<router-view></router-view>
</div>
</template>
<script>
export default {
name:'News',
data(){
return{
messageList:[
{id:'001',title:'消息001'},
{id:'002',title:'消息002'},
{id:'003',title:'消息003'}
]
}
}
}
</script>
named route:
- Can simplify routing jumps
- name the route
6. The params parameter of the route
src/pages/Messgae.vue:
<template>
<div>
<ul>
<li v-for="m in messageList" :key="m.id">
<!-- 跳转路由并携带params参数，to的字符串写法 -->
<!-- <router-link :to="`/home/message/detail/${m.id}/${m.title}`">
{
{m.title}}
</router-link> -->
<!-- 跳转路由并携带params参数，to的对象写法 -->
<router-link :to="{
name:'xiangqing',
params:{
id:m.id,
title:m.title
}
}">
{
{m.title}}
</router-link>
</li>
</ul>
<hr/>
<router-view></router-view>
</div>
</template>
<script>
export default {
name:'News',
data(){
return{
messageList:[
{id:'001',title:'消息001'},
{id:'002',title:'消息002'},
{id:'003',title:'消息003'}
]
}
}
}
</script>
src/pages/Detail.vue:
<template>
<ul>
<li>消息编号：{
{$route.params.id}}</li>
<li>消息标题：{
{$route.params.title}}</li>
</ul>
</template>
<script>
export default {
name:'Detail'
}
</script>
Summarize:
- Configure routing and declare to receive params parameters:
- Passing parameters: special attention: when the route carries params parameters, if you use the object writing method of to, you cannot use the path configuration item, you must use the name configuration!
- Receive parameters:
$route.params.id $route.params.title
7. Routing props configuration
src/pages/Detail.vue:
<template>
<ul>
<li>消息编号：{
{id}}</li>
<li>消息标题：{
{title}}</li>
</ul>
</template>
<script>
export default {
name:'Detail',
props:['id','title']
}
</script>
src/router/index.js
8. Routing jump replace method
在<router-link replace ><router-link/>
Summarize:
- Function: Control the mode of operating browsing history when routing jumps
- There are two ways to write the history of the browser:
pushandreplace, wherepushthe history is appended,replaceand the current record is replaced.pushThe default method is when the route jumps
9. Programmatic Routing Navigation
src/components/Banner.vue:
<template>
<div class="col-xs-offset-2 col-xs-8">
<div class="page-header">
<h2>Vue Router Demo</h2>
<button @click="back">后退</button>
<button @click="forward">前进</button>
<button @click="test">测试一下go</button>
</div>
</div>
</template>
<script>
export default {
name:'Banner',
methods:{
back(){
this.$router.back()
},
forward(){
this.$router.forward()
},
test(){
this.$router.go(3)
}
},
}
</script>
src/pages/Message.vue:
<template>
<div>
<ul>
<li v-for="m in messageList" :key="m.id">
<router-link :to="{
name:'xiangqing',
params:{
id:m.id,
title:m.title
}
}">
{
{m.title}}
</router-link>
<button @click="showPush(m)">push查看</button>
<button @click="showReplace(m)">replace查看</button>
</li>
</ul>
<hr/>
<router-view></router-view>
</div>
</template>
<script>
export default {
name:'News',
data(){
return{
messageList:[
{id:'001',title:'消息001'},
{id:'002',title:'消息002'},
{id:'003',title:'消息003'}
]
}
},
methods:{
showPush(m){
this.$router.push({
name:'xiangqing',
query:{
id:m.id,
title:m.title
}
})
},
showReplace(m){
this.$router.replace({
name:'xiangqing',
query:{
id:m.id,
title:m.title
}
})
}
}
}
</script>
Effect:
Summarize:
Realize routing jump without using <router-link>, making routing jump more flexible
10. Cache Routing Components
//缓存一个路由组件
<keep-alive include="News"> //include中写想要缓存的组件名，不写表示全部缓存
<router-view></router-view>
</keep-alive>
//缓存多个路由组件
<keep-alive :include="['News','Message']">
<router-view></router-view>
</keep-alive>
Function: Let the routing components that are not displayed be exploded and mounted, and will not be destroyed