Vue 路由 5

1 基础

1 安装: npm i vue-router   (一般是 CLI 生成)

2 切换组件的方式:
    1 动态组件
    2 通过路由切换组件   (常用)

3 App.vue 里面的 style样式表: 可看做是全局样式, 不要加 scoped

4 如何设置单页面应用的版心 -- 用一个限制宽度的 div 把 router-view 视图标签包起来

5 手动安装路由的一个使用步骤 
    1 安装 -- npm i vue-router 
    2  main.js -- 加载 --  挂载 
    3 创建路由配置文件 -- src -- router.js 

6 路由的方式实现权限管理?  -- 就是不同人进去看到的信息是不一样的 -- 路由元信息

7 路由懒加载 -- 说白了就是在需要的时候加载就ok

8 在我们接手一个项目的时候 -- 想看明白结构的情况 -- 可以优先去看 -- App.vue + 路由配置表

2 路由传参

1 路由导航分类
-------------------------------------------------------------------------------------
  1 声明式导航 -- a / router-link 
    <router-link :to="/home"> 返回首页 </router-link>

  2 编程式导航 -- window.location.href = "www.baidu.com"  /  $router 操作路由
    1 <button @click="ck1"> 返回首页 <button>  
    2 ck1() {
    
    this.$router.push('/home')}
-------------------------------------------------------------------------------------
   
2 路由传参的理解
--------------------------------------------------------------------------------------
1 作用 -- 从页面A跳转到页面B -- 传递参数的一种方式

2 应用场景
  1 有俩种传参的方式
  2 需要有高亮样式的时候 -- 可用声明式导航
  3 建议使用编程式导航进行路由传参

3 示例
  1 从列表页跳转到详情页传递一个 id 值
  2 跳转的时候我们需要知道 -- 跳转的是哪个内容的详情页
  3 所以我们会传一个指定数据内容的id -- 然后通过这个id来请求对应的数据并展示
--------------------------------------------------------------------------------------

3 涉及到的俩个路由对象
--------------------------------------------------------------------------------------
1 $router == 路由操作对象  (用于操作路由)
    1 跳转到指定的路由地址  //访问的记录被添加到history栈  (/ == 默认首页的路径)
      this.$router.push( "/xx/xx/"+v.id)

    2 跳转到指定的路由地址  //访问的记录不被添加到history栈
	  this.$router.replace( "/xx/xx/"+v.id)
	  
	3 跳转到指定的历史记录  //当前表示返回上一页
	  this.$router.go(-1)

2 $route == 路由信息对象 (用于获取路由信息)
	1 this.$route.query.id
	2 this.$route.params.id
--------------------------------------------------------------------------------------

4 路由如何传参
--------------------------------------------------------------------------------------
1 设置映射表中的 path 路径: 
  path: '/box' -- 改为 path: '/box/:id'  //添加变量

2 不同的传参方式  //声明式导航 + 编程式导航
    1 router-link :to="'/box/' + id">   
    2 this.$router.push('/box?id=' + 1)
    3 this.$router.push( {
    
    path: '/box', query: {
    
    id: 1}} )
    4 this.$router.push('/box'+id)  //动态路由传参
    5 this.$router.push( {
    
    name: '/box', params: {
    
    id: 1}} )

3 不同传参方式对应的接收参数的方式:
    1 this.$route.query.id   //query = {id: 2} --> 2, 3
    2 this.$route.params.id   //params = {id: 2} --> 1, 4, 5
--------------------------------------------------------------------------------------

3 路由知识点

1 router-link 标签
--------------------------------------------------------------------------------------
1 描述: 是 vue-router 的一个内置组件
  
2 作用: 用来改变浏览器的 url地址   //vue中比 a 标签舒服

3 使用: <router-link tag="span" exact-active-class="on" to="zh">
  1 tag: 把 router-link 标签渲染成指定元素  // 默认 <a>
  2 exact-active-class: 当前活跃组件的高亮样式
  3 to: 要跳转的路径
--------------------------------------------------------------------------------------

2 router-view 视图标签
--------------------------------------------------------------------------------------
1 描述: 是 vue-router 的一个内置组件

2 作用: 用于显示当前 url 所映射的 Vue单文件组件

3 一般会在 App.vue 放置一个基础的匿名视图标签

4 视图分为匿名视图和命名视图  //

5 命名视图的作用: 可以在同一个路由地址, 渲染多个不同的组件

6 命名视图的使用: //只有设置了, 映射的 A2和A3才可以在对应的命名视图中, 展示出来
  1 路由映射表: components: {
    
     default: A1, boxa: A2, boxb: A3} 
  2 命名视图标签: <router-view name="boxa"> / <router-view name="boxb"> 
--------------------------------------------------------------------------------------

3 命名路由  //不常用
--------------------------------------------------------------------------------------
1 作用: 给路由映射表中的某一项, 添加一个标识 -- 不常用
2 设置: 路由配置表中要设置的配置项 name -- {
    
      path: '/hh', name: 'Hh', component: Hh }
3 使用: <router-link> 中 -->  to="/hh" 等价于 :to="{name: 'Hh'}" 
4 注意: 尽量不要和其他配置项的 name属性重复
--------------------------------------------------------------------------------------

4 路由重定向
--------------------------------------------------------------------------------------
1 作用: 判断且修改用户输入的url, 让用户去到另一个路由url  (常用于把不存在的页面指向404或首页)

2 设置: 路由配置表中 redirect: {
    
    path: '/hh',  redirect: '/kk', component: Xx}

3 说明: 发现你输入的是url 是 /hh, 给你改为 /kk 并访问
--------------------------------------------------------------------------------------

5 路由别名
--------------------------------------------------------------------------------------
1 作用: 就是为一个组件, 提供另一个可访问的 url
2 设置: 路由配置表中 alias: {
    
    path: '/hh',  alias: '/kk', component: Home}
3 注意: 别名不要与映射表其他项的 path属性值重复
--------------------------------------------------------------------------------------

6 设置 404页面
--------------------------------------------------------------------------------------
1 作用: 对于无效的 url, 给用户展示一个提示页面
2 设置: 路由配置表最后面添加一个配置项: {
    
    path: "*", name: "xx", component: Xx} //或者路由重定向
3 注意: * 表示匹配所有路径 -- 我们习惯把该配置项写在路由配置表的最后面
--------------------------------------------------------------------------------------

7 路由模式
--------------------------------------------------------------------------------------
1 URL组成: 协议 -- 域名 -- 端口号 -- 路径 -- 参数 -- 哈希值 #hash

2 hash 模式: 我们的路径前面会拼接一个 #/;  //也是脚手架默认的模式

3 history 模式: 显示正常路径 (简洁);  但是打包上线的时候刷新会出现404, 需要后端的一个部署

4 CLI 设置 history: const router = new VueRouter({
    
     routes, mode: 'hash' / 'history'}) 
--------------------------------------------------------------------------------------

8 动态路由: 
--------------------------------------------------------------------------------------
1 作用: 某些情况下 url地址要有一些用户信息, 不同的用户要显示不同的内容, 动态路由就是动态放置一些用户信息的

2 设置: 路由映射表中: path: '/user/:id/:name'   // /user/变量/变量, 访问格式: user/[123]/[123]

3 使用: <router-link :to="'/user/'+ 22 + '/zhang'"> hh页面 <router-link>
--------------------------------------------------------------------------------------

9 路由嵌套
--------------------------------------------------------------------------------------
1 作用: 
  1 路由配置文件中, 路由映射表中, 某一配置项中, path的url属性值 (一级路由), 对应的单文件组件 (一级组件)
  2 某些情况下, 需要在一级组件中, 展示另外一个组件, 路由嵌套就是其中一种实现方式

2 设置: 路由映射表中, 某一配置项中
  {
    
    
    path: '/home',
    component: Home,
    children: [  //子路由 (二级路由) 的配置位置
      {
    
    
        path: 'hh1',   //注意子路由的 path属性值, 不加 "/"
        component: Hh1,
        children: []  //三级路由的配置位置
      }
    ]
  }
--------------------------------------------------------------------------------------

4 导航守卫 (路由拦截)

1 概念
----------------------------------------------------------------------------------------
1 导航守卫说明: 
  1 导航: 路由正在发生改变 ->  /home -> /about
  2 守卫: 路由发生改变的时候 (判断权限), 决定是否允许跳转  //不允许的情况, 是取消还是跳转到指定页面

2 分类: //都是钩子函数
  1 全局守卫: 
  2 路由独享守卫: 
  3 组件内的守卫: 

3 理解: 
  1 参数或查询的改变, 并不会触发进入或离开的导航守卫  //就是传参内容或问号后面的改变  
  2 路由切换过程: url改变 -> 判定匹配规则 -> 展示找到的组件  //第二步的过程会触发导航守卫的回调
  3 业务逻辑: 给某些页面设置权限, 让没有权限的用户访问不了这个页面
  4 业务场景: 常用于需要用户信息的页面, 只有登录了才可以访问  (后台管理系统的权限)
  5 操作逻辑: 每次进入权限页面的时候, 都要拿到 token做一个判断

4 常用守卫回调
  1 全局前置守卫: router.beforeEach()  //常用
  2 路由独享守卫: beforeEnter()
  3 组件内的守卫: beforeRouteEnter()
  4 全局后置钩子: router.afterEach()
----------------------------------------------------------------------------------------

2 全局前置守卫: router.beforeEach()
----------------------------------------------------------------------------------------
  1 说明: 每一个路由切换之前, 都会执行这个函数
  2 操作位置: main.js / router.js   //入口文件 或 路由配置文件
  3 具体操作案例: main.js
    import router from './router.js'
    router.beforEach( (to, from, next)=>{
    
    
      // 1 设置权限页面: main / about
      if (to.path === '/main' || to.path === '/about') {
    
    
        if(localStorage.getItem('token')) {
    
     
          next() //以登录, 可以跳转
        } else {
    
      // 未登录的俩种处理方式
          next(false)  //未登录, 中断路由切换
          next('/log')   //未登录, 切换到登录页面
        }
      } else {
    
      // 非权限页面直接允许跳转
		next()  
      }
    })

  4 参数说明: 
    to: 你要进入的目标路由 (路由信息对象)
    from: 当前被拦截的路由 (路由信息对象)
    next: 函数方法, 决定是否切换路由

  5 案例 2
    router.beforeEach((to, from, next)=>{
    
    
      const pages = ['/cart', '/user']  //需要权限的页面
      if(pages.includes(to.path)) {
    
    
        let token = localStorage.getItem('token')
        if (token) {
    
    next()} else {
    
     next('login')}
      } else {
    
    next()}
    }
----------------------------------------------------------------------------------------