component文件夹：经常放置非路由组件
pages|views文件夹：经常放置路由组件
项目中配置的路由一般放在router文件夹中
配置路由
在 /src/router/index.js中配置。
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter)
export default new VueRouter({
mode: history, // 默认 hash
routes:[
{
name:'login',// 给路由命名 路由path过长时，跳转路由可以简化编码
path:'/dashboard',// 路径
component:Home,// 组件
children: [// 子路由 嵌套路由
name:'',
path:'about/:id/:title', // params传参设置占位符
component:Banner,
props: {id: 2,title: '关于'},// 第一种写法：值为对象，该对象的所有key-value都会以props的形式传给组件
props: true, // 第二种写法：值为布尔值，若为真，会把路由组件收到的params参数以props形式传递给组件
props:($route){// 第三中写法：值为函数，函数返回的对象会把路由组件收到的参数以props形式传递给组件
return {id: $route.query.id, title: $route.query.title};// 必须返回对象
},
props: ({query:{ id,title }}){// 第三种写法（简写）：连续性解构赋值
return { id,title };
},
meta: {// 存放自定义数据 用于路由守卫做权限校验
title: '首页',
authority: true,// 是否需要鉴权
},
]
}
]
});
在main.js中注册路由
路由组件与非路由组件的区别：
- 路由组件一般放置在pages|views文件夹，非路由组件一般放置在component文件夹中
- 路由组一般需要在router文件夹中进行注册，使用时用的就是组件的名字；
非路由组件在使用时，一般是以标签的形式使用 - 注册完路由，不管是路由组件还是非路由组件身上都有
$route、$router属性
$route：每个组件实例都有一个route属性，存储这自己的路由信息。一般获取路由信息【路径、query、params】
$router： 整个应用只有一个$router属性，一般进行编程式导航进行路由跳转【push|replace】
切换路由后，上个路由组件默认被销毁，新的路由组件被挂载。
配置路由规则时，一级路由组件需要加/，子路由不需要加/，Vue自动会加上。
路由跳转
路由跳转的两种形式：声明式导航 router-link，编程式导航 $router.push|replace
声明式导航能做的，编程时导航都能；但是编程式导航还可以做一些其他业务逻辑。
<router-link active-class="" to="/home"></router-link> router-link有active-class、to属性。
路由传参
params参数：属于路径当中的一部分，需要注意，在配置的时候需要占位:id
query参数：不属于路径当中的一部分，不需要占位，类似ajax中的queryString /home?k=v
query参数
- 传递参数
<!-- 跳转并携带query参数，to的字符串模板写法 -->
<router-link :to="`/dashboard/workplace?id=${id}`" >注册账户</router-link>
<!-- 跳转并携带query参数，to的对象写法 -->
<router-link :to="{path: `/dashboard/workplace`, query: {id: id}}" >注册账户</router-link>
<router-link :to="{name: 'register',query: {id}}" >注册账户</router-link>// 命名路由跳转
- 接收参数
$route.query.id
<div class="footer">
{{ $route.query.id }}
</div>
params参数
- 传递参数
<!-- 跳转并携带params参数，to的字符串模板写法 -->
<router-link :to="`/dashboard/workplace/${id}/${title}`" >注册账户</router-link>
<!-- 错误写法❌ 不可使用 path，只能使用name -->
<router-link :to="{path: `/dashboard/workplace`, params: {id: id}}" >注册账户</router-link>
<!-- 跳转并携带params参数，to的对象写法 ✅-->
<router-link :to="{name: 'register',params: {id}}" >注册账户</router-link>// 命名路由跳转
- 接收参数
$route.params.id
<div class="footer">
{{ $route.params.id }}
</div>
特别注意： 路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置项。
props传参
路由传递参数以props的方式传递给组件，需要在路由配置规则中配置props项。
- 有三种配置方法
- 第一种写法：值为对象，该对象的所有key-value都会以props的形式传给组件，这里只能传递固定的值。
props: {id: 2,title: '关于'} - 第二种写法：值为布尔值，若为真，会把路由组件收到的
params参数以props形式传递给组件
props: true - 第三中写法：值为函数，函数返回的对象会把路由组件收到的
query参数以props形式传递给组件
props:($route){
return {id: $route.query.id, title: $route.query.title};// 必须返回对象
},
// 简写：连续性解构赋值
props: ({query:{ id,title }}){
return { id,title };
}
- 组件获取props
配置props，数组方式接收
props: ['id', 'title']
注意
- 对象写法可以是name、path形式，但是path不能结合params参数一起使用
- 如果路由要求传递params参数，但是没有传递，URL会出现问题。要想不出现问题，需要在配置路由的时候，在占位参数后面加上
?，该符号表示params可传可不传递 - params传递是一个空字符串，需要使用undefined，才能保证URL正常
路由模式
路由历史记录模式有push和replace,Vue默认的是push模式。push模式会保留历史记录，可以回退也可以前进。replace模式不会保留历史记录，会替换当前路由。
声明式导航使用replace模式需要在<router-link>标签添加replace属性。
<router-link :replace="true" to="/login></router-link">
//简写
<router-link replace to="/login></router-link>
编程式路由导航 $router
作用：不借助router-link实现理由跳转
this.router.push(
{
name: 'login',
params: {},
}
)
this.router.replace(
{
name: 'login',
params: {},
}
)
this.router.back()：后退
this.router.forward()：前进
this.router.go(-2): 前进或后退多少个路由
路由缓存 <keep-alive/>
组件不会被销毁
// 缓存单个组件 字符串形式
<keep-alive includes=“News”>
<router-view> </router-view>
</keep-alive>
// 缓存多个组件 数组形式
<keep-alive :includes=“['News','Message']”>
<router-view> </router-view>
</keep-alive>
includes：指定缓存的组件 【设置组件名】
- 缓存组件后，有可以利用激活失活的组件生命周期来完成显示与隐藏的监听
activated () {
// 组件激活时触发
},
deactivated () {
// 组件失活时触发
},
路由守卫
- 全局守卫
为VueRouter对象设置beforeEach或afterEach函数
- 全局前置守卫
beforeEach：【初始化】时执行、每次路由【切换前】执行
router.beforeEach((to, from, next) => guard(to, from, next, options))
to：去哪个路由
from：来自哪个路由
next()：放行 - 全局后置守卫
afterEach： 【初始化】时执行、每次路由【切换后】执行
router.afterEach((to, from) => guard(to, from, options))
后置守卫没有next函数。
可以用来修改网页页签标题
router.afterEach((to,from)=>{
document.title = to.meta.title || 'xx系统'
})
- 路由独享路由守卫
beforeEnter
路由独享守卫 只有前置，没有后置！在路由配置中添加beforeEnter函数
{
name:'home',
path: '/home',
component: Home,
//独享前置路由守卫
beforeEnter:(to,from,next)=>{
//逻辑和全局路由配置一样
//to是你要跳转到那个路由组件
//from是你从哪个路由组件跳转过来的
//可以在next()前设置条件，当符合条件就放行，比如：
if(localStorage.getItem('token')){
next()
}
}
children: [{
name:'message/:id/:title', //占位符
path: "message",
component: Message
}]
}
- 组件内路由守卫
beforeRouteEnter : 通过路由规则，进入该组件时被调用
beforeRouteUpdate : 通过路由规则，该组件被复用时调用
beforeRouteLeave : 通过路由规则，离开该组件时被调用
beforeRouteEnter (to, from, next) {
// ...
},
beforeRouteLeave (to, from, next) {
// ...
},
----
路由元信息 meta
定义路由的时候可以配置meta字段，meta是一个对象
通过$route.meta获取元信息
使用场景：可以控制组件的隐藏与显示
路由器工作模式
history模式与hash模式
-
对于一个url来说，什么是hash值？
hash值是指一个url中，#后面的内容，它是用来表示一个页面的某个位置 -
hash值不会包含在http 请求中。即：hash值不会带给服务器
-
hash模式：
1.1 url中永远带着 #
1.2 兼容性好
1.3 无需刷新页面
1.4 分享给App时，若App校验严格，地址会被标记为不合法 -
history模式：
1.1 url中不会带着 #
1.2 兼容性较差
1.3 应用上线需后端人员配合解决刷新页面报404的问题 -
history模式下解决404的问题
针对node服务器解决方案：
使用服务器中间件connect-history-api-fallback
const history = require('connect-history-api-fallback')
app.use(history())
node服务器部署前端项目
npm init
npm i express
npm server
image.png
const express = require("express");
const app = express();
// 解决history模式刷新页面出现404的问题
// 使用服务器中间件 connect-history-api-fallback
// const history = require('connect-history-api-fallback')
// app.use(history())
// 中间件
app.use(express.static(__dirname+'/static'))//指定静态资源
app.get("/person", (req, res) => {
res.send({
name:'张三',
age:20
});
});
app.listen(5005, (err) => {
console.log("Server is running on port 5005");
})
路由重定向
在项目运行时，访问/，立马让他定向到首页
网友评论