注意：
利用标签跳转时只能用router-link，利用el-link是行不通的
但是如果使用编程导航的话，任何标签都可以进行跳转！直接在方法里面写就行了！
6. Vue Router路由管理器
6.1 相关理解
6.1.1 vue-router的理解
- vue 的一个插件库，专门用来实现SPA 应用
6.1.2 对SPA应用的理解
- 单页 Web 应用（single page web application，SPA）
- 整个应用只有一个完整的页面
- 点击页面中的导航链接变化更新不会刷新页面，只会做页面的局部更新
- 数据需要通过ajax请求获取
6.1.3 路由的理解
- 什么是路由?
一个路由就是一组映射关系（key - value）
key 为路径url，value 可能是 function 或 component
- 路由分类
后端路由：还可以叫做接口api
- 理解：value 是 function，用于处理客户端提交的请求
- 工作过程：服务器接收到一个请求时，根据请求路径找到匹配的函数来处理请求，返回响应数据
前端路由：
- 理解：value 是 component，用于展示页面内容
- 工作过程：当浏览器的导航路径改变时，对应的组件就会显示
- ==本质==：就是在一个大容器（也是一个组件）中实现以不刷新的方式进行不同的父组件的切换（父组件中可能又包含一系列小的子组件，子组件之间可能也需要进行路由切换）——>本质就是进行组件的切换（父组件可切换地渲染在大容器中）
6.2 基本路由
注意：版本问题
vue2.*.*版本 使用router版本应是3.*.*
vue3.*.*版本使用4.*.*
下载
vue-router：npm i vue-router@3.1.2
public/index.html:
html
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<!-- 针对ie以最高级别的渲染级别渲染页面-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!---开启移动端理想视口-->
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<!--配置页签图标-->
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<!--引入第三方样式-->
<link rel="stylesheet" href="<%= BASE_URL %>css/bootstrap.css">
<!-- 配置网页标题-->
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<!--如果浏览器不支持js时，noscript标签的东西会渲染--->
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<!---容器-->
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>src/router/index.js:
js
//该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router"; //用于new
//引入组件
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:
js
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router' //用于use
import router from './router'
Vue.config.productionTip = false
Vue.use(VueRouter)
new Vue({
el:"#app",
render: h => h(App),
router
})src/App.vue:
vue
<template>
<div>
<div class="row">
<div class="col-xs-offset-2 col-xs-8">
<div class="page-header"><h2>Vue Router Demo</h2></div>
</div>
</div>
<div class="row">
<div class="col-xs-2 col-xs-offset-2">
<div class="list-group">
<!-- 原始html中我们使用a标签实现页面跳转 -->
<!-- <a class="list-group-item active" href="./about.html">About</a>
<a class="list-group-item" href="./home.html">Home</a> -->
<!-- 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>
</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>src/components/Home.vue:
vue
<template>
<h2>我是Home组件的内容</h2>
</template>
<script>
export default {
name:'Home'
}
</script>src/components/About.vue:
vue
<template>
<h2>我是About组件的内容</h2>
</template>
<script>
export default {
name:'About'
}
</script>总结：
- 安装vue-router，命令：npm i vue-router@3.1.2
- 应用插件：Vue.use(VueRouter)
- 编写router配置项：
js
//引入VueRouter
import VueRouter from 'vue-router'
//引入路由组件
import About from '../components/About'
import Home from '../components/Home'
//创建router实例对象，去管理一组一组的路由规则
const router = new VueRouter({
routes:[
{
path:'/about',
component:About
},
{
path:'/home',
component:Home
}
]
})
//暴露router
export default router- 实现切换：
router-link就相当于a标签（但是也可以相当于别的标签，编程式路由导航）
active-class是元素被激活时的样式，可配置高亮样式
这里的active样式是bootstrap提供的！
vue
<router-link active-class="active" to="/about">About</router-link>- 指定路由到的组件展示的位置：
vue
<router-view></router-view>6.3. 几个注意事项
- 路由组件（父组件）通常存放在pages文件夹，组件（子组件或者公共组件）通常存放在components文件夹
比如上一节的案例就可以修改为：
src/pages/Home.vue:
vue
<template>
<h2>我是Home组件的内容</h2>
</template>
<script>
export default {
name:'Home'
}
</script>src/pages/About.vue:
vue
<template>
<h2>我是About组件的内容</h2>
</template>
<script>
export default {
name:'About'
}
</script>src/router/index.js:
js
//该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";
//引入组件
import Home from '../pages/Home'
import About from '../pages/About'
//创建并暴露一个路由器
export default new VueRouter({
routes:[
{
path:'/about',
component:About
},
{
path:'/home',
component:Home
}
]
})src/components/Banner.vue:横幅，标题
或者放在src/components/common/Banner.vue
vue
<template>
<div class="col-xs-offset-2 col-xs-8">
<div class="page-header"><h2>Vue Router Demo</h2></div>
</div>
</template>
<script>
export default {
name:'Banner'
}
</script>src/App.vue:
vue
<template>
<div>
<div class="row">
<Banner/> <!--这里放组件-->
</div>
<div class="row">
<div class="col-xs-2 col-xs-offset-2">
<div class="list-group">
<!-- 原始html中我们使用a标签实现页面跳转 -->
<!-- <a class="list-group-item active" href="./about.html">About</a>
<a class="list-group-item" href="./home.html">Home</a> -->
<!-- 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"> <!--要加to属性，写上子组件的路由-->
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>
import Banner from './components/Banner.vue'
export default {
name:'App',
components:{Banner}
}
</script>通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载
每个组件都有自己的$route属性，里面存储着自己的路由信息
整个应用只有一个router对象，可以通过每个组件的$router属性获取到
6.4. 多级路由
src/pages/Home.vue:
父组件中包含一系列子组件：
vue
<template>
<div>
<h2>Home组件内容</h2>
<div>
<ul class="nav nav-tabs">
<li>
<router-link class="list-group-item" active-class="active" to="/home/news"> <!--要加to属性，写上子组件的路由-->
News
</router-link>
</li>
<li>
<router-link class="list-group-item" active-class="active" to="/home/message">
Message
</router-link>
</li>
</ul>
<router-view></router-view>
</div>
</div>
</template>
<script>
export default {
name:'Home'
}
</script>src/pages/News.vue:
vue
<template>
<ul>
<li>news001</li>
<li>news002</li>
<li>news003</li>
</ul>
</template>
<script>
export default {
name:'News'
}
</script>src/pages/Message.vue:
vue
<template>
<ul>
<li>
<a href="/message1">message001</a>
</li>
<li>
<a href="/message2">message002</a>
</li>
<li>
<a href="/message/3">message003</a>
</li>
</ul>
</template>
<script>
export default {
name:'News'
}
</script>src/router/index.js:
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', //相当于/home/news
component:News
},
{
path:'message', //相当于/home/message
component:Message
}
]
}
]
})效果：
总结：
- 配置路由规则，使用children配置项：
js
routes:[
{
path:'/about',
component:About,
},
{
path:'/home', //这里一定要加/
component:Home,
children:[ //通过children配置子级路由
{
path:'news', //此处一定不要写：/news，不能加/
component:News
},
{
path:'message', //此处一定不要写：/message
component:Message
}
]
}
]- 跳转（要写完整路径）：
vue
<router-link to="/home/news">News</router-link>6.5. 路由的query参数：不常用
src/router.index.js:
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'
import Detail from '../pages/Detail'
//创建并暴露一个路由器
export default new VueRouter({
routes:[
{
path:'/about',
component:About
},
{
path:'/home',
component:Home,
children:[
{
path:'news',
component:News
},
{
path:'message',
component:Message,
children:[ //这里是三级路由了
{
path:'detail',
component:Detail
}
]
}
]
}
]
})src/pages/Detail.vue:
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:
vue
<template>
<div>
<ul>
<li v-for="m in messageList" :key="m.id">
<!-- 跳转路由并携带query参数，to的模板字符串写法（指定参数值为data中的数据），前面要加:，数据绑定才可以写js表达式 -->
<!-- <router-link :to="`/home/message/detail? id=${m.id}&title=${m.title}`">
{{m.title}}
</router-link> -->
<!-- 跳转路由并携带query参数，to的对象写法，写上path和query属性 -->
<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>效果：
总结：
传递参数：
vue<!-- 写法1：跳转并携带query参数，to的字符串写法 --> <router-link :to="/home/message/detail?id=666&title=你好">跳转</router-link> <!-- 写法2：跳转并携带query参数，to的对象写法 --> <router-link :to="{ path:'/home/message/detail', query:{ id:666, title:'你好' } }">跳转</router-link>接收参数：写在js语句中即可，包括和指令标签绑定的属性对应的value都可以写js代码
js$route.query.id $route.query.title
6.6. 命名路由
src/router/index.js:
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'
import Detail from '../pages/Detail'
//创建并暴露一个路由器
export default new VueRouter({
routes:[
{
path:'/about',
component:About
},
{
path:'/home',
component:Home,
children:[
{
path:'news',
component:News
},
{
path:'message',
component:Message,
children:[
{
//name配置项为路由命名，跳转可以直接写这个name
name:'xiangqing',
path:'detail', //就算用name跳转，但是显示的路径还是这个
component:Detail
}
]
}
]
}
]
})src/pages/Message.vue:
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进行跳转，就不用再写/home/message/detail了，太长了
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>总结：
命名路由：
- 作用：可以简化路由的跳转的url的编写（有时候url太长了）
- 如何使用：
给路由命名：
js{ path:'/demo', component:Demo, children:[ { path:'test', component:Test, children:[ { name:'hello' //给路由命名 path:'welcome', component:Hello, } ] } ] }简化跳转路径的编写：
vue<!--简化前，需要写完整的路径 --> <router-link to="/demo/test/welcome">跳转</router-link> <!--简化后，直接通过名字跳转（更方便） --> <router-link :to="{name:'hello'}">跳转</router-link> <!--简化写法配合传递参数 --> <router-link :to="{ name:'hello', query:{ id:666, title:'你好' } }" >跳转</router-link>
6.7. 路由的params参数：比query好，但是必须用命名路由
src/router/index.js: ==路由的params参数结合了命名路由（并且必须使用命名路由），相对于query来说是一种改进，解决了path太长的问题==
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'
import Detail from '../pages/Detail'
//创建并暴露一个路由器
export default new VueRouter({
routes:[
{
path:'/about',
component:About
},
{
path:'/home',
component:Home,
children:[
{
path:'news',
component:News
},
{
path:'message',
component:Message,
children:[
{
name:'xiangqing',
path:'detail/:id/:title', //使用占位符声明接收params参数，占位符格式为 ": + 参数名"
component:Detail
}
]
}
]
}
]
})src/pages/Message.vue:
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:
vue
<template>
<ul>
<li>消息编号：{{$route.params.id}}</li>
<li>消息标题：{{$route.params.title}}</li>
</ul>
</template>
<script>
export default {
name:'Detail'
}
</script>总结：
配置路由，声明接收params参数：
js{ path:'/home', component:Home, children:[ { path:'news', component:News }, { component:Message, children:[ { name:'xiangqing', path:'detail/:id/:title', //使用占位符声明接收params参数 component:Detail } ] } ] }传递参数：
vue<!-- 跳转并携带params参数，to的字符串写法 --> <!--和query参数的写法区别较大，把 ?a=1&b=2 的写法改成了 /参数 的形式--> <router-link :to="`/home/message/detail/${m.id}/${m.title}`">跳转</router-link> <!-- 跳转并携带params参数，to的对象写法 --> <!--和query参数的写法没什么区别，就是把query属性换成了params属性--> <router-link :to="{ name:'xiangqing', params:{ id:666, title:'你好' } }" >跳转</router-link>
特别注意：路由携带params参数时，==若使用to的对象写法==，则不能使用path配置项，==必须使用name配置！==
- 接收参数：和query的区别：就是把.query换成了.params
js
$route.params.id
$route.params.title6.8. 路由的props配置：比较常用，params结合props（重点1）
src/pages/Message.vue:
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>
</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/router/index.js:
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'
import Detail from '../pages/Detail'
//创建并暴露一个路由器
export default new VueRouter({
routes:[
{
path:'/about',
component:About
},
{
path:'/home',
component:Home,
children:[
{
path:'news',
component:News
},
{
path:'message',
component:Message,
children:[
{
name:'xiangqing',
path:'detail/:id/:title',
component:Detail,
//props的第一种写法，值为对象，该对象中的所有key-value都会以props的形式传给Detail组件。注意：这里是拿不到$route的
// props:{a:1,b:'hello'}
//props的第二种写法，值为布尔值，若布尔值为真，就会把该路由组件收到的所有params参数，以props的形式传给Detail组件
// props:true
//props的第三种写法，值为函数，且可以拿到$route并取出其中的值，返回值如果为对象，该对象中的所有key-value都会以props的形式（实际上还是对象，但是只用key组成数组，当然这只是props其中之一的写法——数组写法）传给Detail组件
props($route){
return {
id:$route.params.id,
title:$route.params.title
}
}
//高级写法：把$route对象直接拆出属性
//props({ query: { id, title } }){
//return {
//id,
//title
//}
//}
}
}
]
}
]
}
]
})src/pages/Detail.vue:
vue
<template>
<ul>
<li>消息编号：{{id}}</li>
<li>消息标题：{{title}}</li>
</ul>
</template>
<script>
export default {
name:'Detail',
props:['id','title']
}
</script>总结：
作用：让路由组件更方便的收到参数
主要是在接收方组件那边就不用写
$route.params/query.属性了！因为如果参数太多，写太多这个重复的$route.params/query.属性会看着很乱变成props就会非常方便地接收参数，然后直接使用
js{ name:'xiangqing', path:'detail/:id/:title', component:Detail, //三选一： //第一种写法：props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detail组件。注意：这里是拿不到$route对象的 ——> 适用于额外传一些比较固定的参数 // props:{a:900} //第二种写法：props值为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给Detail组件 ——> 适用于使用props参数方式传值（原来的params传的值都会存在组件的props中，而不会再需要使用$route.params.属性了！！！这是最方便的方法，但是不支持query参数） // props:true //第三种写法：值为函数（回调函数，也就是vue-router自动调用的函数），且可以拿到$route并取出其中的值，返回值如果为对象，该对象中的所有key-value都会以props的形式（实际上还是对象，但是只用key组成数组，当然这只是props其中之一的写法——数组写法）传给Detail组件 ——> 适用于使用props参数方式传值，但是不传所有的，并且需要做一些额外操作时，并且这个支持query和params两种方式！！！ props($route){ return { id:$route.params.id, title:$route.params.title //id:666, //title:你好啊 } } //高级写法：解构赋值，把$route对象直接拆出属性 //方式一：解构一层 ——> 这个语义化更明确一点 //props({ query }){ //return { //id: query.id, //title: query.title //} //} //方式二：解构两层：连续解构赋值 //props({ query: { id, title } }){ //return { //id, //title //} //} }注意：本质上还是没有变的，还是query/params传值，只是接收时改成了props形式进行接收！
6.9. 路由跳转的replace方法
src/pages/Home.vue:
vue
<template>
<div>
<h2>Home组件内容</h2>
<div>
<ul class="nav nav-tabs">
<li>
<router-link replace class="list-group-item" active-class="active" to="/home/news">News</router-link>
</li>
<li>
<router-link replace class="list-group-item" active-class="active" to="/home/message">Message</router-link>
</li>
</ul>
<router-view></router-view>
</div>
</div>
</template>
<script>
export default {
name:'Home'
}
</script>总结：
作用：控制路由跳转时 操作浏览器历史记录 的模式
浏览器的历史记录：就是我们平常用浏览器时点击前进或者后退，就会触发历史记录
==浏览器的历史记录有两种写入方式：push和replace，其中push是追加历史记录（不破坏任何一条路由下的页面记录，这样就能前进也也能后退），replace是替换当前记录（每次都破坏上一条页面记录，这样就不能前进也不能后退了）。路由跳转时候默认为push方式==
开启replace模式：
<router-link replace ...>News</router-link>或者：<router-link :replace="true" ...>News</router-link>应用：比如登录成功之后不能返回登录页面，需要用到replace模式
或者说商家生成二维码让用户扫，扫完之后应当不能后退
6.10. 编程式路由导航（重点2）
6.10.1 前进后退的函数
src/components/Banner.vue:
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) //前进3步
}
},
}
</script>6.10.2 路由跳转函数 ——>这个最好用也最常用
src/pages/Message.vue:
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>
<!--现在的方式-->
<!--注意：需要把m对象传给方法-->
<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({ //写在methods里面，代替了之前的<router-link>标签，更加灵活，实现任意标签任意事件实现跳转路由！！！并且可以指定跳转方式push/replace
name:'xiangqing',
query:{
id:m.id,
title:m.title
}
})
},
showReplace(m){
this.$router.replace({
name:'xiangqing',
query:{
id:m.id,
title:m.title
}
})
}
}
}
</script>src/router/index.js:
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'
import Detail from '../pages/Detail'
//创建并暴露一个路由器
export default new VueRouter({
routes:[
{
path:'/about',
component:About
},
{
path:'/home',
component:Home,
children:[
{
path:'news',
component:News
},
{
path:'message',
component:Message,
children:[
{
name:'xiangqing',
path:'detail',
component:Detail,
props($route){
return {
id:$route.query.id,
title:$route.query.title,
}
}
}
]
}
]
}
]
})src/pages/Detail.vue:
vue
<template>
<ul>
<li>消息编号：{{id}}</li>
<li>消息标题：{{title}}</li>
</ul>
</template>
<script>
export default {
name:'Detail',
props:['id','title']
}
</script>效果：
点一下查看，内容显示在下方！
总结：
作用：不借助
<router-link>实现路由跳转，让路由跳转更加灵活原理：因为$router是路由器，它可以操作跳转！
这样我们就实现了想什么适合跳就什么时候跳，想往哪跳就往哪跳，想传什么参数就传什么参数
注意：
$route属性和$router路由器是不一样的，$route属性是每个vc对象身上带有的属性，而$router路由器（或者说router对象）是new VueRouter()得来的对象，由于use了它，所以每个vc对象身上也有了$router对象！具体编码：
jsthis.$router.push({ //写在methods里面，代替了之前的<router-link>标签，更加灵活，实现任意标签任意事件实现跳转路由！！！并且可以指定跳转方式push/replace！！！ name:'xiangqing', params:{ id:xxx, title:xxx } }) this.$router.replace({ name:'xiangqing', params:{ id:xxx, title:xxx } }) this.$router.forward() //前进（与浏览器的前进点击效果一样，都是触发浏览器历史记录） this.$router.back() //后退 this.$router.go() //可前进也可后退，根据数字的正负进行判断，以及具体的步数
制作搜索功能
思路：先创建一个单独的搜索组件，按钮写成router编程导航，然后传到搜索结果组件中进行搜索，展示
先在mounted中获取参数，然后就把参数传给mounted的查询方法里面进行查询！当然还要接收bus的内容进行查询！逻辑比较复杂！
6.11. 缓存路由组件
src/pages/News.vue:
vue
<template>
<ul>
<li>news001 <input type="text"></li>
<li>news002 <input type="text"></li>
<li>news003 <input type="text"></li>
</ul>
</template>
<script>
export default {
name:'News'
}
</script>src/pages/Home.vue:
vue
<template>
<div>
<h2>Home组件内容</h2>
<div>
<ul class="nav nav-tabs">
<li>
<router-link class="list-group-item" active-class="active" to="/home/news">News</router-link>
</li>
<li>
<router-link class="list-group-item" active-class="active" to="/home/message">Message</router-link>
</li>
</ul>
<keep-alive include="News">
<router-view></router-view>
</keep-alive>
</div>
</div>
</template>
<script>
export default {
name:'Home'
}
</script>效果：
总结：
作用：让不展示的路由组件保持挂载，不被销毁（不走vue销毁流程）
具体编码：
注意要用keep-alive标签包裹的是 要缓存的组件被渲染的那个router-view区域
vue<!--缓存全部路由组件--> <keep-alive include="News"> <!--include中写想要缓存的组件名，不写表示全部缓存--> <router-view></router-view> </keep-alive> <!--指定缓存某几个路由组件，写的必须是组件名，组件名指的是创建组件时指定的name属性的值--> <keep-alive :include="['News','Message']"> <router-view></router-view> </keep-alive>应用：在输入框输入内容，切到了其他路由，但是希望切回来的时候内容还在！（如果不搞缓存的
话，输入的内容是会消失的，因为会走Destroy的流程）
6.12. 钩子函数：activated和deactivated
src/pages/News.vue：
vue
<template>
<ul>
<!--绑定属性值-->
<li :style="{opacity}">欢迎学习vue</li>
<li>news001 <input type="text"></li>
<li>news002 <input type="text"></li>
<li>news003 <input type="text"></li>
</ul>
</template>
<script>
export default {
name:'News',
data(){
return{
opacity:1
}
},
activated(){
console.log('News组件被激活了')
this.timer = setInterval(() => {
this.opacity -= 0.01 //激活之后逐渐变得透明
if(this.opacity <= 0) this.opacity = 1
},16)
},
deactivated(){
console.log('News组件失活了')
clearInterval(this.timer) //销毁定时器
}
}
</script>效果：
总结：
- activated和deactivated是路由组件所独有的两个钩子，用于捕获 路由组件 的激活状态
- 具体使用：
activated路由组件被激活（而不是挂载）时触发（由路由跳转到这个组件时）——> 类似于mounted函数
deactivated路由组件失活（而不是销毁）时触发（由路由跳转到其他组件，即离开了这个组件时）——>类似于beforeDestroy函数
3.应用：如果路由组件被缓存了，那么切换到其他页面时，之前的beforeDestroy函数是失效的（因为
组件根本没有被销毁），但是这时候deactivated可以奏效
如果路由组件被缓存了，那么切换到这个页面时，mounted函数也是失效的，因为并没有重新挂载，但是
这时候activated可以奏效
4.总结：所以有时候activated和deactivated两个函数对于路由组件来说更有用
6.13. 路由守卫
御前侍卫：保护君王的安全！
路由守卫：保护路由的安全！（要符合要求才能跳转路由，即权限控制）
前置路由守卫：说白了就是让路由器router帮我们做权限控制，在每一次切换到每个组件之前进行判断限制（有点像拦截器），如果无权限那么浏览器url是不变的
6.13.1. 全局路由守卫
src/router/index.js:
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'
import Detail from '../pages/Detail'
//创建一个路由器
const router = new VueRouter({
routes:[
{
name:'guanyv',
path:'/about',
component:About,
meta:{title:'关于'}
},
{
name:'zhuye',
path:'/home',
component:Home,
meta:{title:'主页'},
children:[
{
name:'xinwen',
path:'news',
component:News,
//isAuth：是否授权，authorize授权
meta:{isAuth:true,title:'新闻'} //定义一个meta对象（名字必须叫meta，这个是专门提供给我们放一些数据的，是路由元信息），里面存储一些标志变量和属性等
},
{
name:'xiaoxi',
path:'message',
component:Message,
meta:{isAuth:true,title:'消息'},
children:[
{
name:'xiangqing',
path:'detail',
component:Detail,
meta:{isAuth:true,title:'详情'},
props($route){
return {
id:$route.query.id,
title:$route.query.title,
}
}
}
]
}
]
}
]
})
//全局前置路由守卫————项目初始化的时候，及每次路由切换之前被调用
//to就是要去哪的所有信息，from就是从哪来的所有信息，next就是放行
router.beforeEach((to,from,next) => {
//console.log('前置路由守卫',to,from)
//if(to.path === '/home/news' || to.path === '/home/message'){ //这个方式太麻烦了
if(to.meta.isAuth){ //我们在每个路由里加一个标志变量，表示这个路由是否需要被校验，注意调用的是我们要去的那个组件的meta对象 ——> 只有全局路由守卫才需要这个标志变量！
//这里我们直接在localStorage里面手动创建了一个k-v为school：atguigu
if(localStorage.getItem('school')==='atguigu'){
next() //放行
}else{
alert('学校名不对，无权限查看！')
}
//}
}else{
next()
}
})
//全局后置路由守卫————项目初始化的时候，及每次路由切换完成之后被调用
router.afterEach((to,from)=>{ //没有next
//console.log('后置路由守卫',to,from)
document.title = to.meta.title || '硅谷系统' //设置网页标题
})
//导出路由器
export default router6.13.2. 独享路由守卫
src/router/index.js:
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'
import Detail from '../pages/Detail'
//创建一个路由器
const router = new VueRouter({
routes:[
{
name:'guanyv',
path:'/about',
component:About,
meta:{title:'关于'}
},
{
name:'zhuye',
path:'/home',
component:Home,
meta:{title:'主页'},
children:[
{
name:'xinwen',
path:'news',
component:News,
meta:{title:'新闻'},
//独享路由守卫：进入这个路由组件之前被调用，直接写在路由对象里面
//注意：独享路由守卫没有后置
beforeEnter(to,from,next){
console.log('独享路由守卫',to,from)
if(localStorage.getItem('school') === 'atguigu'){
next()
}else{
alert('暂无权限查看')
}
}
},
{
name:'xiaoxi',
path:'message',
component:Message,
meta:{title:'消息'},
children:[
{
name:'xiangqing',
path:'detail',
component:Detail,
meta:{title:'详情'},
props($route){
return {
id:$route.query.id,
title:$route.query.title,
}
}
}
]
}
]
}
]
})
//全局后置路由守卫————初始化的时候被调用，每次路由切换之后被调用
router.afterEach((to,from)=>{
console.log('后置路由守卫',to,from)
document.title = to.meta.title || '硅谷系统'
})
//导出路由器
export default router6.13.3. 组件内路由守卫
src/pages/About.vue:
vue
<template>
<h2>我是About组件的内容</h2>
</template>
<script>
export default {
name:'About',
//直接写在组件里面的守卫，和前置/后置路由守卫是两码事，因为不是一个时间节点被调用的守卫！
//通过路由规则进入该组件时被调用（有点像activted函数，但是这个beforeRouteEnter是做权限的，还是不太一样！）
beforeRouteEnter (to, from, next) {
console.log('About--beforeRouteEnter',to,from)
if(localStorage.getItem('school')==='atguigu'){
next()
}else{
alert('学校名不对，无权限查看！')
}
},
//通过路由规则离开该组件时被调用（有点像deactivted函数），可以制定规则，在不满足条件的时候不让离开！——>但是这个不是后置路由守卫，是离开组件守卫
beforeRouteLeave (to, from, next) {
console.log('About--beforeRouteLeave',to,from)
next()
}
}
</script>6.13.4. 总结
- 作用：对路由进行权限控制
- 分类：全局守卫、独享守卫、组件内守卫
- 区别：
全局守卫：总览全局，每次切换（进入/离开）组件前调用前置，切换（进入/离开）组件后调用后置
独享守卫：每次进入组件前调用
组件内守卫：每次进入组件后调用，离开组件前调用
注：所以说这三个首位是完全不一样的，因为它们所针对的时间节点都不一样，只有独享守卫和全局守卫能够有一点时间重合，其余所有时间节点都挨不到一起！它们三者的to和from都不一样！
- 全局守卫：
js
//全局前置守卫：初始化时执行、每次路由切换前执行
router.beforeEach((to,from,next)=>{
console.log('beforeEach',to,from)
if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
if(localStorage.getItem('school') === 'atguigu'){ //权限控制的具体规则
next() //放行
}else{
alert('暂无权限查看')
}
}else{
next() //放行
}
})
//主要作用：做权限控制，拦截器
//全局后置守卫：初始化时执行、每次路由切换后执行
router.afterEach((to,from) => {
console.log('afterEach',to,from)
if(to.meta.title){
document.title = to.meta.title //修改网页的title
}else{
document.title = 'vue_test'
}
})
//主要作用：设置网页标题，能够根据功能模块名动态地切换网页标题！——>很好的功能- 独享守卫：
js
beforeEnter(to,from,next){
console.log('beforeEnter',to,from)
if(localStorage.getItem('school') === 'atguigu'){
next()
}else{
alert('暂无权限查看')
}
}- 组件内守卫：
js
//进入守卫：通过路由规则，进入该组件时被调用
beforeRouteEnter (to, from, next) {...},
//离开守卫：通过路由规则，离开该组件时被调用
beforeRouteLeave (to, from, next) {...},6.14. 路由器的两种工作模式：history和hash
对于一个浏览器的url来说，什么是hash值？#及其后面的内容就是hash值
即#/home是hash值
hash值不会包含在 HTTP 请求中，即：hash值不会带给服务器
即#及其后面的所有内容对于请求来说都是忽略的
也就是说，localhost:8080/student 等于 localhost:8080/student/#/dasdasdasd/atguigu
如果有的部分不想给服务器，就可以加一个#再加其他东西（即前端路由的url，这是没必要给服务器的！）——>但是实际上如果前后端项目处于两个端口就不涉及这个问题
hash模式特点：
地址中永远带着#号，不美观
若以后将网页地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法（因为地址中带#了）
兼容性较好，旧的浏览器也支持跳转
- history模式特点：——> 一般用这个
地址干净，美观
兼容性和hash模式相比略差
应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题
5.如何指定路由模式？
通过router里面的mode配置项！默认是hash模式！
js
const router = new VueRouter({
//默认开启hash模式
mode: "history",
routes: [
{
name: "regard",
path: "/about",
component: About,
meta: {
isAuth: true,
title: "关于",
}
}
]
});6.对比：
history：localhost:8080/student 等价于 hash：localhost:8080/#/student
6.15 打包项目
运行npm run build
将vue文件以及一系列文件都转换为html+js+css+map(webpack的）文件
注意：这个指令只看public和src两个目录，只打包这里面的文件
打包之后的项目必须要放在服务器上面部署才可以访问！
6.15.1 搭建服务器
用nodejs+express框架快速搭建一个微型服务器
1.新建一个文件夹serverjs，用vscode打开
生成的结构如下：
2.新建server.js
js
const express = require("express"); //用ES5的引入方式
const app = express();
app.get("/person", (req, res) => {
resizeBy.send({
name: "tom",
age: 18,
});
});
app.listen(5005, (err) => {
if (!err) console.log("服务器启动成功了！");
});3.运行js文件
4.访问
5.指定静态资源目录
js
const express = require("express"); //用ES5的引入方式
const app = express();
app.use(express.static(__dirname+'/static')) //静态资源目录
app.get("/person", (req, res) => {
res.send({
name: "tom",
age: 18,
});
});
app.listen(5005, (err) => {
if (!err) console.log("服务器启动成功了！");
});6.把build生成的css,js文件夹+ico图标+index.html文件放到static目录下
7.直接访问localhost:5005即可访问到index.html了！
但是这样的话如果刷新就会出现问题（报错404），因为我们是用的histoy的模式路由，所以路径上面的所有内容都
会被当做是访问服务器的内容（因为前端后端现在都在5005端口上，并没有分离），但是我们只是想要
实现前端的路由而已
这个时候应当改成hash模式！
如果不改成hash呢？——> 在server.js中也可以操作
history模式下前后端同一端口造成404的解决办法：
vue项目依然使用history模式
然后server.js（后端工程）中操作：使用nodojs中间件
下载中间件connect-history-api-fallback：
bash
npm i connect-history-api-fallback这个包专门用来解决404问题
js
const express = require('express');
const history = require('connect-history-api-fallback'); //引入包
const app = express();
//中间件
//服务器中间件专门解决history模式(vue中)出错的问题 (前端路由，后端路由混杂)
///注意：如果是hash模式就不会有这个问题
app.use(history()) //必须在静态资源之前使用
// app.use(express.static(__dirname+'/static'));
app.use(express.static(`${__dirname}/static`)); //也可以用模板字符串写法，与上面那个等价
app.listen(5003,(err) => {
if(!err){
console.log('服务器启动成功了');
}
});
app.get('/person',(req,res) => {
res.status(200).json({
name: 'py',
age: 21
})
});注：如果是后端是java工程，也有对应的解决办法（这里不做讲解）
注：还可以用nginx解决，中间代理作用，能够分辨出来这个请求是前端路由还是后端路由