概念

1、vue-router的理解

vue的一个插件库，专门用来实现SPA应用。

2、对SPA（单页面）应用的理解

1）单页web应用（single page web application, SPA）。
2）整个应用只有一个完整的页面。
3）点击页面中的导航链接不会刷新页面，只会做页面的局部更新。
4）数据需要通过ajax请求获取。

3、什么是路由

1、路由（route）就是一组key-value的对应关系。key为路径，value可能是function或component。
2、多个路由，需要经过路由器（router）的管理。

4、路由分类

1）后端路由：（后端接口路径）
理解：value是function，用于处理客户端提及哦啊的请求。
工作过程：服务器接收到一个请求时，根据请求路径找到匹配到函数来处理请求，返回响应数据。
2）前段路由：（浏览器路径）
理解：value是component，用于展示页面内容。
工作过程：当浏览器的路径改变时，对应的组件就是显示。

5、路由跳转方式

声明式导航：router-link（务必要有to属性），可以实现路由跳转。
编程式导航：利用的是组件实例的$router.push | replace方法，可以实现路由的跳转。

基本使用

1、安装vue-router，命令：npm i vue-router
2、应用插件：Vue.use(VueRouter)
3、编写router配置项：

// 引入VueRouter
import VueRouter from 'vue-router'
// 引入组件
import Home from './Home'
//创建router实例对象，去管理一组一组的路由规则
const router = new VueRouter({routes: [{path: '/home',name: 'Home',component: Home},{path: '/vuex',name: 'vuex',component: () => import(/* webpackChunkName: "base" */ '../views/vuex/Home')},]
})
// 暴露router
export default router

4、实现切换（active-class可配置高亮样式）

<router-link active-class="active" to="/home">Home</router-link>

5、指定展示位置

<router-view />

几个注意事项

1、路由组件通常存放在pages文件夹，一般组件通常存放在components文件夹。
2、通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载。
3、每个组件都有自己的$route属性，里面存储着自己的路由信息。
4、整个应用只有一个router，可以通过组件的$router属性获取到。

路由的query参数（传的参数在地址栏中显示）

1、传递参数

<!-- 跳转并携带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>

2、接收参数

$route.query.id
$router.query.title

路由params参数（传的参数不在地址栏中显示）

1、配置路由，生命接收params参数

{path: '/home',component: Home,children: [{path: 'datail/:id/:title', // 使用占位符生命接收params参数name: 'detail',component: Detail}]
}

2、传递参数

<!-- 跳转并携带params参数，to的字符串写法 -->
<router-link :to="/home/detail/666/你好">跳转</router-link><!-- 跳转并携带query参数，to的对象写法 -->
<router-link:to="{name: 'detail',params: {id: 666,title: '你好'}}">跳转</router-link>

特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name。
3、接收参数

$route.params.id
$route.params.name

路由的props配置

        path: '/ref',name: 'ref',title: 'ref父子组件传值',component: () => import(/* webpackChunkName: "base" */ '../views/Ref/fu'),children: [{path: 'refzi',// path: 'refzi/:id/:title',name: 'refzi',title: 'ref父子组件传值',// props的第一种写法，值为对象，该对象中的所有key-value都会以props的形式传递给‘ref’组件// 传递的死数据// props: { a: 1, b: 'hello' },// props的第二种写法，值为布尔值。若布尔值为真，就会把该路由组件收到的所有params参数，以props的形式传给‘ref‘组件// props: true,// props的第三种写法，值为函数。使用query// props($route) {props({ query }) { // { query }：结构赋值// console.log($route)return { id: query.id, title: query.title }},component: () => import(/* webpackChunkName: "base" */ '../views/Ref/ref')}]}

`<router-link>`的replace属性

1、作用：控制路由跳转时操作游览器历史记录的模式。
2、浏览器的历史记录有两种写入方式：分别是push和replace,push是追加历史记录，replace是替换当前记录。路由跳转时候默认为push。
3、如何开启replace模式：<router-link replace></router-link>。

编辑路由组件

     this.$router.push({path: '/ref/refzi',query: {id: 666,title: '你好啊'}})this.$router.replace({name: 'refzi',params: {id: 666,title: '你好啊'}})
this.$router.back()  // 后退
this.$router.forward() // 前进
this.$router.go(n) // 前进或后退n个历史记录（负数：后退，正数：前进）

缓存路由组件

1、作用：让不展示的路由组件保存挂载状态，不被销毁。
2、具体代码：

<!-- includce：要作用于哪个组件，name：组件中定义的name的值 -->
<!-- 缓存一个：include="name" ；缓存多个：:include="['name1', 'name2']" -->
<keep-alive include="name"><router-view />
</keep-alive>

两个新的生命周期钩子

1、作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态。
2、具体名字：

1）activated路由组件被激活时触发。
2）deactivated路由组件失活时触发。

路由守卫

1、作用：对路由进行权限控制
2、分类：全局守卫、独享守卫、组件内守卫
3、全局守卫：

// 全局前置守卫：初始化时执行、每次路由切换前执行
router.beforeEach((to, from, next) => {console.log('beforeEach', to, from)if(to.meta.isAuth) { // 判断当前路由是否需要进行权限控制if(localStorage.getItem('homem') === 'yes') { // 权限控制的具体规则next() // 放行} else {alter('暂无权限查看')}} 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'}
})

4、独享守卫：

// 全局前置守卫：初始化时执行、每次路由切换前执行
beforeEnter((to, from, next) => {console.log('beforeEnter', to, from)if(to.meta.isAuth) { // 判断当前路由是否需要进行权限控制if(localStorage.getItem('homem') === 'yes') { // 权限控制的具体规则next() // 放行} else {alter('暂无权限查看')}} else {next() // 放行}
})

5、组件内守卫：

// 进入守卫：通过路由规则，进入该组件时被调用
beforeRouteEnter((to, from, next) => {})
// 离开守卫：通过路由规则，离开该组件时被调用
beforeRouteLeave((to, from, next) => {})

路由器的两种工作模式

1、对于一个url来说，什么是hash值？—— #及其后面的内容就是hash值。
2、hash值不会包含在HTTP请求中，即：hash值不会带给服务器。
3、hash模式：

1）地址中永远带着#号，不美观。
2）若以后将地址通过第三方手机app分享，若app检验严格，则地址会被标记为不合法。
3）兼容性好。

4、histoty模式：

1）地址干净，美观。
2）兼容性和hash模式相比略差。
3）应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题。

vue-router学习相关推荐

（50）Vue Router插件介绍
一.Vue Router插件介绍 Vue Router 是 Vue.js 的官方插件,用来快速实现单页应用. 二.Vue Router学习内容 • 单页应用 • 前端路由 • Vue Router 三 ...
Vue学习笔记（六）--- 前端路由 Vue Router
一.路由 1.概念路由本质上来说就是一种对应关系,比如说我们在浏览器中输入不同的 url 地址,我们就能访问不同的资源,那么这 url 地址与资源之间的对应关系,就是路由. 2.分类 ① 后端路 ...
Vue之router学习
router学习 js小问题起步定义动态路由匹配通配符 AND 404 高级匹配匹配优先级嵌套路由编程式的导航 push和replace 注意 router.go(n) 操作Histor ...
Vue 学习(十、 Vue Router - 路由插件和 Vue 的插件原理)
文章目录一.Vue Router - 路由插件 1. 安装 Vue Router 2. Vue Router 路由的基本使用 3. 设置 router-link 4. 编程式路由 5. 路由嵌套 6 ...
Vue.js 3.0 学习笔记（十一）Vue Router路由
一.使用Vue Router 1.HTML页面使用路由 <!DOCTYPE html> <html> <head><meta charset="UT ...
vue.js基础学习（Vue Router安装与使用）
基础入门:vue.js Vue Router安装与使用 1.Vue Router安装在cmd窗口运行命令:npm install vue-router@4,安装Vue Router: 2. Vue ...
Vue 新手学习笔记：vue-element-admin 之安装，配置及入门开发
所属专栏: Vue 开发学习进步说实话都是逼出来的,对于前端没干过ES6都不会的人,vue视频也就看了基础的一些但没办法,接下来做微服务架构,前端就用 vue,这块你负责....说多了都是泪,脚手 ...
Vue Router 4.0 正式发布！焕然一新。
关注若川视野,回复"pdf" 领取资料,回复"加群",可加群长期交流学习 12月8日,Vue Router 4 正式发布稳定版本. 在经历了 14 个 Alph ...
老张 .NetCore与Vue 框架学习
缘起作为一个.Net攻城狮已经4年有余了,一直不温不火,正好近来项目不是很忙,闲得无聊,搞一搞新技术,一方面是打发无聊的时间,一方面也是督促自己该学习辣!身边的大神都转行的转行,加薪的加薪,本人比较 ...
vue router 参数_Vue.js项目开发技术解析
Vue.js项目开发技术解析一.Vue.js实例在一个Vue.js工程中,用于显示内容最基层的实例称之为根实例.通过该实例可以进行页面或组件的更新和显示.对于项目本身而言,无论是什么样的页面,都要 ...

vue-router学习

相关面试题

相关错误和解决办法

概念

基本使用

几个注意事项

路由的query参数（传的参数在地址栏中显示）

路由params参数（传的参数不在地址栏中显示）

路由的props配置

`<router-link>`的replace属性

编辑路由组件

缓存路由组件

两个新的生命周期钩子

路由守卫

路由器的两种工作模式

vue-router学习相关推荐

最新文章

热门文章

vue-router学习

相关面试题

相关错误和解决办法

概念

基本使用

几个注意事项

路由的query参数 （传的参数在地址栏中显示）

路由params参数（传的参数不在地址栏中显示）

路由的props配置

<router-link>的replace属性

编辑路由组件

缓存路由组件

两个新的生命周期钩子

路由守卫

路由器的两种工作模式

vue-router学习相关推荐

最新文章

热门文章

路由的query参数（传的参数在地址栏中显示）

`<router-link>`的replace属性