vue项目vue-router的使用

1、路由的基础配置

//需要在main.js文件内引入,具体可以查看我的另一篇关于main.js设置的文章

https://blog.csdn.net/weixin_44258964/article/details/105835057

• 以下配置主要是单独路由文件的配置
• 引入vue-router插件并使用
• 路由下主要分两种模式，具体可以看第二部分内容
• 路由是有路径（path）、名称（name）、组件（component）组成的
• 映射组件可有多种方式去处理，具体可以看以下代码

//路由的实现原理其实就是动态加载不同组件
import Vue from 'vue'
import VueRouter from 'vue-router’
//路径引入
import HelloWorld from '@/components/HelloWorld'
vue.use(VueRouter)
const router = new VueRouter({
mode: 'history’,//模式配置
routes: [
{
    path: '/‘,//指定当前匹配的路径
    name: 'HelloWorld’,//路由名字
//webpack在打包的时候会把整个路由打包成一个js文件，如果页面一多，会导致这个文件非常大，加载缓慢
    component: HelloWorld//映射的组件
    //也可使用以下方式去注册，不需要提前引入该路径了，且实现懒加载，webpack会把每个路由都打包一个js，例如1.js\2.js这样的，在请求到该页面的时候才去加载这个页面js，
    //component: (resolve) => require(['@/views/tsTest'], resolve)
},
{
//配置动态id，使用$route.params.id获取动态
    path: '/router_test/:id',//路由传参
    name: 'routerTest',
    component: (resolve) => require(['@/views/routerTest.vue'], resolve)
},
 // 增加重定向，没有的路径自动跳转到首页
    {
      path: '*',
      redirect: '/'
    },
]
export default router

2、路由的两种模式

vue项目默认是hash模式
1、hash：就是常说的锚点（#），js通过hashChange事件监听url做的改变，ie7一下需要轮询
2、history ：可以使url像普通网站以一样用’/’分割，但是页面并没有跳转，需要服务端的支持

使用history模式，需要获取服务端的支持，以下是history配置

//第一种
//page.json文件里面配置
"scripts": { "dev": "webpack-dev-server --env.dev --history-api-fallback” }
//第二种
//webpack.config.js文件里面配置
devServer: {
historyApiFallback: {
rewrites: [
{ from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
],
}
},
//所有路由都会指向index.html

3、关于router的使用

一、使用内置的组件，默认会渲染成一个标签

<router-link to=“/“ tag=“li” replace></router-link>
//to是一个prop，指定需要跳转的路径
//replace不会留下History的记录，故不能使用导航后退一步返回上一个页面

二、可以在js里面进行的方式

1.this.$router.push() 等同于
描述：跳转到不同的url，但这个方法会向history栈添加一个记录，点击后退会返回到上一个页面。
用法：

this.$router.push(‘home’)
this.$router.push({path:‘home’})
//路由传参数，但不会显示在url里
this.$router.push({name:’aaa’,params:{id:4}})
//通过this.$route.params.id获取
//带查询参数，会显示在url上/aaa?id=4
this.$router.push({path:’aaa’,query:{id:4}})
//通过this.$route.query.id获取
*****path和params搭配不会生效****

2.this.$router.replace()
描述：同样是跳转到指定的url，但是这个方法不会向history里面添加新的记录

• 点击返回，会跳转到上上一个页面。上一个记录是不存在的。

3.this.$router.go(n)

• 相对于当前页面向前或向后跳转多少个页面,类似 window.history.go(n)。n可为正数可为负数。正数返回上一个页面
• 浏览器中前进一步，等同于history.forward()、
  this.$router.go(1)
• 浏览器中后退一步，等同于history.back()、
  this.$router.go(-1),如果参数太大或太小就失败

4、路由的高级设置使用

• 设置页面标题（js使用window.document.title去设置标题），router使用导航钩子统一配置
• 在router配置里面加上meta属性

{
    path: '/‘,//指定当前匹配的路径
    component: (resolve) => require(['@/views/tsTest'], resolve),
    meta: {
        title: '路由使用'
    }
},

• 再配合钩子做统一处理，meta里面的对象可以自定义，故可以做很多全局设置的事，比如根据token属性判断页面是否登录

/*在跳转之前执行*/
router.beforeEach((to, from, next) => {
    window.document.title = to.meta.title
    next();//必须有!否则页面就会显示空白
})
//三个参数
To:即将进入的目标的路由对象
from：当前导航即将要离开的路由对象
next：调用该方法后，方可进入下一个钩子；next()可以设置参数，根据参数去到不同页面
router.afterEach((to, from, next) => {
    Console.log(’跳转之后执行’)
    Next()//可以省略
})

5、嵌套路由的使用

• 有时候我们会需要再某个页面里面加载页面的内容，这时候可以使用嵌套路由

//路由
{
path: '/shouye',
name: 'HelloWorld',
component: HelloWorld,
meta: {
title: '首页'
},
children: [{
path: '/router_view_page',
name: 'routerViewTest',
component: () => import('@/views/test/routerViewTest.vue'),
meta: {
title: 'routerView测试页面'
}
}]
},
//使用方法
//点击触发之后显示嵌套内容
<router-link to="/router_view_page">嵌套组件</router-link>
<router-view></router-view> 

6、其他

1、$route和 $router的区别

• 传值使用 $route
• 跳转使用 $router

7、路由相关问题复习巩固

1. vue-router怎么重定向页面？

// 增加重定向，没有的路径自动跳转到首页
    {
      path: '*',
      redirect: '/'
    },

2. vue-router怎么配置404页面？

{
    path: '*',
    component: ‘404页面组件'
},

3. 切换路由时，需要保存草稿的功能，怎么实现呢？
   使用keep-live 不明白看这个 https://segmentfault.com/a/1190000011978825
4. vue-router路由有几种模式？说说它们的区别？
   模式介绍上面有详细内容
5. vue-router有哪几种导航钩子（ 导航守卫 ）？
   全局钩子 router.beforeEach 和router.afterEach
   单个路由钩子 写在路由里的 beforeEnter
   组件内钩子 ：

beforeRouteEnter(to, from, next) {
    // do someting
    // 在渲染该组件的对应路由被 confirm 前调用
},
beforeRouteUpdate(to, from, next) {
    // do someting
    // 在当前路由改变，但是依然渲染该组件时调用
},
beforeRouteLeave(to, from ,next) {
    // do someting
    // 导航离开该组件的对应路由时被调用
}

全局解析守卫
router.beforeResolve 注册一个全局守卫，和 router.beforeEach 类似，

6. 说说你对router-link的了解
   组件形式的路由跳转
   active-class exact-active-class是匹配后的class样式
   属性To代表跳转的链接
   属性tag代表该组件渲染出来的标签样式
   属性replace也是表示跳转，但是不会存储在history里面

7. vue-router如何响应路由参数的变化？
   动态设置例如属性
   path:’/lujin/:id’
   以上路径id即动态的，利用$route.params.id可以获取 在路由跳转的时候设置对象query例如 This.$router.push({path:’/lujin’,query:{id:122}})
   通过this.$route.query.id可以获取，同上params也可如此设置

8. 你有看过vue-router的源码吗？说说看
   没有！！！！

9. 切换到新路由时，页面要滚动到顶部或保持原先的滚动位置怎么做呢？
   使用router.beforeEach,设置页面滚动位置window.scrollTo(0,0);

10. 在什么场景下会用到嵌套路由？
    二级菜单

11. 如何获取路由传过来的参数？
    $route.query.参数名字||$route.params.参数名字

12. 说说active-class是哪个组件的属性？
    

13. 在vue组件中怎么获取到当前的路由信息？
    this.$router是路由实例，this.$route是路由信息

14. vur-router怎么重定向？
    通过设置redirect

15. 怎样动态加载路由？
    ！！！！router的 addroutes方法，暂时不知道怎么使用

• 怎么实现路由懒加载呢？
  () => import(’@/views/login/index’)

16. 如果让你从零开始写一个vue路由，说说你的思路
    先创建路由实例，然后注册
    配置路由模式
    配置页面
    路由配置，配置404的页面

17. 说说vue-router完整的导航解析流程是什么？
    导航被触发。
    在失活的组件里调用离开守卫。
    调用全局的 beforeEach 守卫。
    在重用的组件里调用 beforeRouteUpdate 守卫
    在路由配置里调用 beforeEnter。
    解析异步路由组件。
    在被激活的组件里调用 beforeRouteEnter。
    调用全局的 beforeResolve 守卫
    导航被确认。
    调用全局的 afterEach 钩子。
    触发 DOM 更新。
    用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。

18. 路由之间是怎么跳转的？有哪些方式？
    router-link、$router.push|go|replace

19. 如果vue-router使用history模式，部署时要注意什么？
    需要配置上面有讲

20. route和router有什么区别？
    $route一个是路由信息,一般用于获取路由参数什么的，$router一个是路由实例，用于跳转什么的

21. vue-router钩子函数有哪些？都有哪些参数？
    全局钩子、单个路由里的钩子、组件钩子

22. vue-router是用来做什么的？它有哪些组件？
    是一个路由插件，用来设置路由跳转的，router-link、router-view、