05-Vue路由什么是路由? 目标: 路径和组件的映射关系路由的本质是什么? 改变url的哈希值,让js监听到,根据配

1. 路由简介

什么是路由?

目标: 路径和组件的映射关系

路由的本质是什么?

改变url的哈希值,让js监听到,根据配置好的映射规则,显示不同的组件

单页面应用SPA : 所有功能在一个HTML页面内实现, 切换业务场景

优点:整体不刷新页面,用户体验跟好

缺点:开发升本高 ,不利于seo

组件分类: 页面组件 - 复用组件

views下的页面组件配合路由切换

2. vue-router使用

1.安装 yarn add vue-router@3.6.5

2.导入后面实例化对象,函数名第一个字母呢大写

import VueRouter from "vue-router"

3.使用在vue中，使用使用vue的插件，都需要调用Vue.use()

Vue.use(VueRouter) //全局注册提供全局组件 router-view router-link

4.创建路由规则数组

const routes = [  {  path:"/",  redirect:"/find"  // 路由重定向 网页默认打开, 匹配路由"/", 强制切换到"/find"上  },  {  path:"/find",  name:"Find",  component:Find,  // 路由嵌套 1.规则嵌套 -children 2. 页面嵌套-挂载点  // 二级路由  children:[    {      path:"recommend",      component:Rencommend    },  ]  },  {  path:"/home",  name:"Home",  component:Home  },  {  path:"/home/:name", // 有:的路径代表要接收具体的值  component:Home  },  {  path:"*",     //404页面   component:NotFound  },]

5.创建路由对象

const router = new VueRouter({  routes,  mode: "history" // 打包上线后需要后台支持, 模式是hash})

路由守卫使用场景:当你要对路由权限判断时.

let isLogin = false
router.beforeEach((to,from,next)=>{    
if(to.path === "/my" &&isLogin===false)
{      
alert("请先登录")      
next(false) //阻止路由跳转    
}else{      
next() //正常放行    
}})

总结next() 放行 , next(false)留在原地 next(path路径)强制跳转

6.关联到Vue根实例

new Vue({  router,  render: h => h(App),}).$mount('#app')

7.用router-view作为挂载点,切换不同的路由页面

<router-view></router-view>

总结: 下载路由模块, 编写对应规则注入到vue实例上, 使用router-view挂载点显示切换的路由

3. 声明式导航

(1)目标: 可用全局组件router-link来替代a标签

1. vue-router封装注册提供了一个全局组件 router-link

2. router-link实质上最终会渲染成a链接 to属性等价于提供 href属性(to无需#)

3. router-link提供了声明式导航高亮的功能(自带类名)

4.声明导航 -类名区别

目标: router-link自带的2个类名的区别是什么

- router-link-exact-active (精确匹配) url中hash值路径, 与href属性值完全相同, 设置此类名

- router-link-active (模糊匹配) url中hash值, 包含href属性值这个路径

(2)目标: 在跳转路由时, 可以给路由对应的组件内传值

1.查询传参

2.路径传参

<router-link to="/my/?name=zs&age=12">我的音乐</router-link>        
<router-link to="/home/小智">朋友</router-link>

(3)重定向和模式 :

重定向目标: 匹配path后,通过在路由规则使用redirect, 强制切换到目标path上 ,

404页面目标: 如果路由hash值, 没有和数组里规则匹配

模式设置目标: 如果路由hash值, 没有和数组里规则匹配默认给一个404页面

hash路由例如: http://localhost:8080/#/home

history路由例如: http://localhost:8080/home (以后上线需要服务器端支持, 否则找的是文件夹)

const router = new VueRouter({

routes,

mode: "history" // 打包上线后需要后台支持, 模式是hash

})

4. 编程式导航

目标: 用JS代码来进行跳转

btn(targetPath,targetName){
this.$router.push({                
// path:targetPath,  //路由路径                
// path:"/my/?name=哪吒&age=6"                
name:targetName, //路由名  方便修改                
// 格外注意: 使用path会自动忽略params                
// params:{                
//   name:"王五params"  //只能$route.params.name接收                
// }                
query:{                  
name:"查询query",                  
age:22                
}            
})                   
}

5. 嵌套和守卫

在现有的一级路由下,再嵌套二级路由

总结: 嵌套路由, 找准在哪个页面里写router-view和对应规则里写children 二级路由注意 : 1. 二级路由规则中path一般不写根路径/ 2. 页面跳转时路径要从/开始写全

全局前置守卫

目标: 路由跳转之前,先执行一次前置守卫函数 ,判断是否可以正常跳转

6. vant组件库

什么是vant组件库?

封装了很多的组件, 支持移动项目中大多数使用场景

导入组件的三种方式?

自动按需引入组件 , 手动按需引入组件 , 导入所有组件

面试题

1. 路由之间是怎么跳转的？有哪些方式

1、<router-link to="需要跳转到页面的路径">

2、this.$router.push()跳转到指定的url，并在history中添加记录，点击回退返回到上一个页面

3、this.$router.replace()跳转到指定的url，但是history中不会添加记录，点击回退到上上个页面

4、this.$router.go(n)向前或者后跳转n个页面，n可以是正数也可以是负数

2. vue-router怎么配置路由

在vue中配置路由分为5个步骤，分别是：

引入vue-router.js
配置路由path和组件, 和生成路由对象
把路由对象配置到new Vue中router选项下
页面使用承载路由
设置路由导航(声明式导航方式/编程式跳转)

3. vue-router的钩子函数都有哪些

关于vue-router中的钩子函数主要分为3类

全局钩子函数要包含beforeEach

beforeEach函数有三个参数,分别是:

to:router即将进入的路由对象 from:当前导航即将离开的路由 next:function,进行管道中的一个钩子，如果执行完了,则导航的状态就是 confirmed （确认的）否则为false,终止导航。

单独路由独享组件

beforeEnter,

组件内钩子

beforeRouterEnter， beforeRouterUpdate, beforeRouterLeave

4. 路由传值的方式有哪几种

Vue-router传参可以分为两大类，分别是编程式的导航 router.push和声明式的导航

router.push

字符串：直接传递路由地址，但是不能传递参数

this.$router.push("home")

对象：

命名路由这种方式传递参数，目标页面刷新会报错 - name+params

this.$router.push({name:"news",params:{userId:123})

查询参数和path配对的是query

this.$router.push({path:"/news',query:{uersId:123})

接收参数 this.$route.query

声明式导航

字符串 <router-link to:"news">

命名路由 <router-link :to:"{name:'news',params:{userid:1111}}">

还可以to="/path/值" - 需要提前在路由规则里值 /path/:key

查询参数

还可以to="/path?key=value

5. 怎么定义vue-router的动态路由?怎么获取传过来的动态参数?

动态路由指的就是path路径上传智, 前提需要路由规则了提前配置/path/:key名, 可以写多个用/隔开, 获取使用$route.params.key名来提取对应用路径传过来的值

6. Vue的路由实现模式：hash模式和history模式（必会）

hash模式：在浏览器中符号“#”，#以及#后面的字符称之为hash，用 window.location.hash 读取。特点：hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务端安全无用，hash不会重加载页面。

history模式：history采用HTML5的新特性；且提供了两个新方法： pushState()， replaceState()可以对浏览器历史记录栈进行修改，以及popState事件的监听到状态变更

7. 请说出路由配置项常用的属性及作用（必会）

路由配置参数：

path : 跳转路径 component : 路径相对于的组件 name:命名路由 children:子路由的配置参数(路由嵌套) props:路由解耦 redirect : 重定向路由

8. 编程式导航使用的方法以及常用的方法（必会）

路由跳转： this. $router.push() 路由替换 : this.$ router.replace() 后退： this. $router.back() 前进：this.$ router.forward()

9. Vue如何去除URL中的#（必会）

vue-router 默认使用 hash 模式，所以在路由加载的时候，项目中的 URL 会自带 “#”。如果不想使用 “#”，可以使用 vue-router 的另一种模式 history：new Router ({ mode : 'history', routes: [ ]})

需要注意的是，当我们启用 history 模式的时候，由于我们的项目是一个单页面应用，所以在路由跳转的时候，就会出现访问不到静态资源而出现 “404” 的情况，这时候就需要服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 “index.html” 页面。

10. 说一下你在vue中踩过的坑（必会）

1、第一个是给对象添加属性的时候，直接通过给data里面的对象添加属性然后赋值，新添加的属性不是响应式的

【解决办法】通过Vue.set(对象，属性，值)这种方式就可以达到，对象新添加的属性是响应式的

2、在created操作dom的时候，是报错的，获取不到dom，这个时候实例vue实例没有挂载

【解决办法】通过：Vue.nextTick(回调函数进行获取) 因为data变化更新DOM是异步的

11. 和router的区别？

$route是路由信息对象，包括‘path，hash，query，fullPath，matched，name’等路由信息参数；$ router是路由实例对象，包括了路由的跳转方法，实例对象等

05-Vue路由