目录
1. 编程式路由导航
作用：不借助<router-link>实现路由跳转，让路由跳转更加灵活。如让button进行路由跳转、延迟就行路由跳转
- News.vue
this.$router.back()进行后退this.$router.forward()进行前进this.$router.go进行前进或后退。负几表示后退几下，正几表示前进几下
<template>
<div>
<h2>我是News的内容</h2>
<button @click="back">后退</button>
<button @click="forward">前进</button>
<button @click="go">go后退两下</button>
<div>
<ul class="nav nav-tabs">
<li>
<router-link class="list-group-item" active-class="active" to="/news/car">Car</router-link>
</li>
<li>
<router-link class="list-group-item" active-class="active" to="/news/music">Music</router-link>
</li>
</ul>
<router-view></router-view>
</div>
</div>
</template>
<script>
export default {
name:'News',
methods: {
back(){
this.$router.back()
},
forward(){
this.$router.forward()
},
go(){
// 负几表示后退几下，正几表示前进几下
this.$router.go(-2)
}
}
}
</script>
- Music.vue
this.$router.push进行push查看this.$router.replace进行replace查看
<template>
<div>
<ul>
<li v-for="m in musicList" :key="m.id">
<router-link :to="{
name:'detail',
// path:'/news/music/detail',
params:{
id:m.id,
title:m.title
}
}">
{{ m.title }}
</router-link>
<button @click="pushShow(m)">push查看</button>
<button @click="replaceShow(m)">replace查看</button>
</li>
</ul>
<hr>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'Music',
data() {
return {
musicList: [
{id: 1, title: 'music1'},
{id: 2, title: 'music2'},
{id: 3, title: 'music3'}
]
}
},
methods: {
pushShow(m){
this.$router.push({
name:'detail',
params:{
id:m.id,
title:m.title
}
})
},
replaceShow(m){
this.$router.replace({
name:'detail',
params:{
id:m.id,
title:m.title
}
})
}
}
}
</script>
- 启动项目。访问http://localhost:8080/#/news/music，页面如下：
- 点击push查看music1
- 点击push查看music2
- 点击replace查看music3
- 点击go后退两下，查看的是Music
- 点击前进，查看的是music1
- 点击后退，查看的是Music
2. 缓存路由组件
作用：让不展示的路由组件不被销毁，保持挂载
- Car.vue。里面有input输入框
<template>
<ul>
<li>car1 <input type="text"></li>
<li>car2 <input type="text"></li>
<li>car3 <input type="text"></li>
</ul>
</template>
<script>
export default {
name:'Car'
}
</script>
- News.vue
- 使用
<keep-alive>标签缓存组件，默认缓存所有激活的组件，使用include指定组件name缓存指定的组件 - 也可以使用
<keep-alive :include="['Car']">缓存多个组件
- 使用
<template>
<div>
<h2>我是News的内容</h2>
<div>
<ul class="nav nav-tabs">
<li>
<router-link class="list-group-item" active-class="active" to="/news/car">Car</router-link>
</li>
<li>
<router-link class="list-group-item" active-class="active" to="/news/music">Music</router-link>
</li>
</ul>
<keep-alive include="Car">
<router-view></router-view>
</keep-alive>
</div>
</div>
</template>
<script>
export default {
name:'News'
}
</script>
- 运行项目，打开web页面，输入框输入内容。再点击Music，再点击Car，输入框输入的内容还在
3. 路由生命周期钩子
路由组件所独有的两个钩子，用于捕获路由组件的激活状态
- activated：路由组件被激活时触发
- deactivated：路由组件失活时触发
Car.vue。如下所示：
<template>
<ul>
<li>car1 <input type="text"></li>
<li>car2 <input type="text"></li>
<li>car3 <input type="text"></li>
</ul>
</template>
<script>
export default {
name:'Car',
activated() {
console.log("Car组件被激活了")
},
deactivated() {
console.log("Car组件失活了")
}
}
</script>
- 运行项目，访问http://localhost:8080/#/news/car。页面如下：
再点击Music，再点击Car。控制台输出如下：
Car组件被激活了
Car组件失活了
Car组件被激活了
4. 路由守卫
保护路由的安全，对路由进行权限管理
4.1 全局前置和后置路由守卫
- src/router/index.js
- 全局前置路由守卫: 项目启动的时候进行初始化被调用，和每次路由切换跳转之前被调用
- 可以根据
to.meta.myIsAuth进行权限控制，也可以根据to.path或to.name进行权限控制。符合条件的用next()进行放行。next({ path: '/home'})也可以传入path跳转到其它路由 - 这里使用了localStorage进行模拟获取数据。也可以使用vuex获取数据
- 没有权限，则不会跳转。url也不会发生变化
- 全局后置守卫：项目启动的时候进行初始化被调用，和每次路由切换跳转之后被调用。例如可以在跳转之后动态改变
document.title
......省略部分......
const router = new VueRouter({
routes:[
......省略部分......
{
path:'/news',
component:News,
children:[
{
path:'car',
component:Car,
meta: {myIsAuth: true}
},
{
path:'music',
component:Music,
meta: {myIsAuth: true},
......省略部分......
}
]
}
]
})
// 全局前置路由守卫: 项目启动的时候进行初始化被调用，和每次路由切换跳转之前被调用
router.beforeEach((to,from,next)=>{
if(to.meta.myIsAuth){
// 这里使用localStorage进行模拟获取数据。也可以使用vuex获取数据
if(localStorage.getItem('school') === '第一中学'){
next()
}else{
// 没有权限，则不会跳转。url也不会发生变化
alert('学校名不对，无权限查看！')
}
}else{
next()
}
})
// 全局后置路由守卫: 项目启动的时候进行初始化被调用，和每次路由切换跳转之后被调用
router.afterEach((to,from)=>{
})
export default router
- 运行项目。点击其它是可以访问的，点击Car和Music是无权进行访问的，如下所示。在浏览器的localStorage设置了key为school，value为第一中学的本地缓存后，就可以正常访问Car和Music了
4.2 独享路由守卫
使用方法和router.beforeEach差不多，只不过beforeEnter是作用于当前路由映射规则的
- src/router/index.js
......省略部分......
const router = new VueRouter({
routes:[
......省略部分......
{
path:'/news',
component:News,
children:[
{
path:'car',
component:Car,
meta: {myIsAuth: true},
beforeEnter: (to, from, next) => {
if(to.meta.myIsAuth){
if(localStorage.getItem('school')==='第一中学'){
next()
}else{
alert('学校名不对，无权限查看！')
}
}else{
next()
}
}
},
......省略部分......
]
}
]
})
export default router
4.3 组件内路由守卫
- About.vue
- beforeRouteEnter：通过路由规则，进入该组件前被调用
- beforeRouteLeave：通过路由规则，离开该组件前被调用
<template>
<h2>我是About的内容</h2>
</template>
<script>
export default {
name: 'About',
// 通过路由规则，进入该组件前被调用
beforeRouteEnter (to, from, next) {
if(to.meta.myIsAuth){
if(localStorage.getItem('school')==='第一中学'){
next()
}else{
alert('学校名不对，无权限查看！')
}
}else{
next()
}
},
// 通过路由规则，离开该组件前被调用
beforeRouteLeave (to, from, next) {
next()
}
}
</script>
5. 两种工作模式(hash和history)
- hash模式：
- 地址中永远带着#号，不美观 。#及其后面的内容就是hash值
- hash值不会包含在HTTP请求中，即hash值不会带给服务器
- 若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法
- 兼容性较好。url请求带错误的hash值，服务器也不会报错
- history模式：
- 地址干净，美观
- 兼容性和hash模式相比略差
- 应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题。可以判断哪些请求的url路径是前端路由，哪些请求的url路径是后端路由。可以用java的库解决，也可以用node.js的库进行解决，也可以用nginx解决。后面将用node.js的库进行解决
- 开启方式。修改src/router/index.js如下所示。访问后url就不带#了
// import {createWebHistory } from 'vue-router'
......省略部分......
export default new VueRouter({
// history: createWebHistory(),
mode:'history',
routes:[
......省略部分......
]
})
6. 使用node.js的express部署前端服务
- 先使用
cnpm run build命令打包出dist目录 - 在桌面新建目录project-deploy
- 在project-deploy目录下，使用命令
cnpm init将这个目录进行初始化。如下所示。package name输入自己的服务名，Is this OK输入yes，其他回车默认即可
C:\Users\Administrator\Desktop\project-deploy>cnpm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.
See `npm help init` for definitive documentation on these fields
and exactly what they do.
Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.
Press ^C at any time to quit.
package name: (project-deploy) my_test_server
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to C:\Users\Administrator\Desktop\project-deploy\package.json:
{
"name": "my_test_server",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
Is this OK? (yes) yes
C:\Users\Administrator\Desktop\project-deploy>
- 在project-deploy目录下，使用命令
cnpm i express安装express - 在project-deploy目录下，新建server.js文件，内容如下：
const express = require('express') // commonjs语法
const app = express()
app.listen(8088, (err) => {
if(!err) console.log('服务器启动成功了！')
})
// 接收客户端的请求，并给客户端返回数据
app.get('/user', (req, res) => {
res.send({
id:1,
name:'lily'
})
})
- 在project-deploy目录下，输入
node server启动服务 - 访问http://localhost:8088/user，返回user的数据
- 在project-deploy目录下，新建static或public目录，新建test.html文件。内容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>hello world</h1>
</body>
</html>
- 在project-deploy/server.js里面，添加
app.use(express.static(__dirname + '/static'))加载静态资源 - 按ctrl + c停掉服务，再启动服务
- 访问http://localhost:8088/test.html，可以访问到test.html页面。将test.html改名为index.html，不用重启服务，就可以直接访问http://localhost:8088首页内容
- 删除掉project-deploy/static/index.html。将我们的打包的dist目录下的所有文件或文件，拷贝到project-deploy/static目录下，就可以访问到我们自己的项目首页了
7. node.js解决history模式刷新404问题
- 打开npmjs.com。搜索connect-history-api-fallback
- 在项目部署的目录project-deploy下，运行命令
cnpm i connect-history-api-fallback安装包 - 在项目部署的project-deploy/server.js下，添加history相关的代码。如下所示
const express = require('express') // commonjs语法
const history = require('connect-history-api-fallback');
const app = express()
app.use(history())
app.use(express.static(__dirname + '/static'))
app.listen(8088, (err) => {
if(!err) console.log('服务器启动成功了！')
})
// 接收客户端的请求，并给客户端返回数据
app.get('/user', (req, res) => {
res.send({
id:1,
name:'lily'
})
})
- 重新启动服务
- 刷新http://localhost:8088/news/music，也不会报404的问题
扫一扫
803
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
