vue-route 路由

vue-route 路由

1. 路由概念

url地址除了 域名，后面跟的那一段路径信息，这个路径会指向页面所在的组件

2. 路由基础 ***

2.1 基础路由***

路由基础流程：

1.引入vue-router
2.创建页面
3.配置路由表
4.创建路由对象   new VueRouter
5.注册路由
6.设置路由出口  router-view
7.设置路由链接  router-link    会解析为 a  ，但是不会整页刷新

2.2 子路由（children）

2.2.1 配置路由表

src/router/index.js

{
    path: '/home',
    name: 'Movie',
    component: Movie,
    //配置子路由
    children: [
      { path: '/home', redirect: '/home/reying' },
      { path: "reying", name: "reying", component: () => import(/* webpackChunkName: "reying" */ '../views/home/Reying.vue') },
    ]
  },

2.2.2 需要在展示子路由的页面 设置 路由出口

src/views/home/Movie.vue

 <!-- 3.子路由出口 -->
      <router-view></router-view>

2.2.3 需要在展示子路由的页面 设置 路由链接

1、直接修改父路由地址重定向 src/views/home/Movie.vue

<!--4.子路由链接-->
      <div class="childtitle">
        <router-link to="/home/reying">热映</router-link>
        <router-link to="/home/yingyuan">影院</router-link>
        <router-link to="/home/daiying">待映</router-link>
        <router-link to="/home/jingdian">经典电影</router-link>
      </div>

2. 修改路由配置 redirect:reying -->zh

{
    path: '/home',
    name: 'Movie',
    component: Movie,
    redirect: 'reying',
    //配置子路由
    children: [
      { path: '/home', redirect: '/home/reying' },
      { path: "reying", name: "reying", component: () => import(/* webpackChunkName: "reying" */ '../views/home/Reying.vue') },
    ]
  },

2.3 $router 和 $route 的区别

this.$router全局的路由对象，options.routes包括所有的路由路径,this.$router.push() this.$router.go()

this.$route 本页面的路由对象， 当前页的 url地址， 当前页的传参 params query

3. 路由传参 ***

3.1 动态路由

1. 定义路由 在路由表 路径后面 添加 :key

   例如：

{path:"/home/:userid",component:home}

2.使用路由 在 router-link

<router-link to="/home/动态路由的值"></router-link>

例： <router-link to="/home/16"></router-link>

3.在 跳转到的页面 获取 动态路由传过来的数据

html  :  {{$route.params.key }}     例  {{$route.params.userid}}

js:   this.$route.params.key           例  this.$route.params.userid

注意：参数会跟在 url后面，刷新页面时 ，参数还存在

3.2 params

使用 编程式导航，params方式传参

this.$router.push({"name":"about",params:{userid:66}})

接收参数：

html  :  {{ $route.params.key }}     例  {{$route.params.userid}}

js:   this.$route.params.key           例  this.$route.params.userid

注意：params 参数没有在 url后面，刷新页面时，参数就获取不到了

3.3 query

使用 编程式导航，params方式传参

this.$router.push({"path":"about",query:{userid:66}})

接收参数：

html  :  {{$route.query.key }}     例  {{$route.query.userid}}

js:   this.$route.query.key           例  this.$route.query.userid

注意：query参数在 url后面 ，先拼接 ? 在拼接 query 的key和value，刷新页面时，参数还存在

4. 404 页面处理 ***

在 路由的最后面 写一句

{path:"*",component:page404}

5. 路由可以设置 name 名称 **

{path:"/about",name:"about",component:about}

6. 编程式导航 ***

1. push 可以跳转到任何页面 ,push里面的参数可以 字符串或对象

   push(“路由路径”)

2. go 返回上一页

​ go(-1)

7. 路由重定向 redirect ***

{path:"/",redirect:"/home"}

8. 路由懒加载 ***

8.1 路由懒加载(使用import) , ***

这种方式的懒加载是已经在 webpack中设置好的

{ path: '/home', name: 'home', 
component: () => import(/* webpackChunkName: "home" */ '../views/home.vue')}

8.2 异步加载 resolve require

{ path: '/home', name: 'home', component: resolve => require(['@/components/home'],resolve) },

8.3 webpack提供的require.ensure()

{ path: '/home', name: 'home', component: r => require.ensure([], () => r(require('@/components/home')), 'demo') },

9. 激活状态链接的css样式设置 *

a.router-link-exact-active {  //完全匹配
  color: #f03d37;
}

a.router-link-active {  //部分匹配就会有激活状态的样式
  color: #f03d37;
}

10.路由模式 ***

hash & history 的 区别

​ hash 的路由模式： 在路由地址中 会存在 # ，向后台传送参数时，正常#后面的内容是不会传给后台的

​ 优点：刷新时，页面不会 找不到

​ history的路由模式： 在路由中没有 #，向后台传送参数都会正常传送； 刷新 页面会404 ；

​ history模式需要后台配置支持，如果找不到页面时设为重定向到首页 index.html ，有可能重定向到 404页面

​ history模式 需要 使用 history.pushState API，ie低版本都不支持

11. 路由守卫

导航守卫种类：全局导航守卫（***）、路由级导航守卫、组件级导航守卫

路由守卫一共有7钟

11.1 全局守卫 有三种 ：

全局 前置守卫router.beforeEach ， 拦截页面 ***

全局解析守卫 router.beforeResolve，

全局 后置钩子router.afterEach

11.2 路由独享守卫

beforeEnter 写在路由表中，单独的某个页面的守卫 拦截页面

11.3 组件级路由守卫 ， 写在组件里的， 有三种：

//页面进入前的路由守卫，不能获取 vue 的this指向，如果需要获取，在 next(vm=>{这里的vm就是vue对象  })   可以在 页面进入前的路由守卫中获取数据
beforeRouteEnter: (to, from, next) => {
    console.log("组件进入前的守卫 执行了");
    next();
},
//组件更新时的守卫,   需要动态路由 ，当传递的参数不一样时才会触发 该路由守卫
    beforeRouteUpdate: (to, from, next) => {
        console.log("组件更新时的守卫 执行了");
        next();
    },
//组件离开时的守卫，做挽留 功能
beforeRouteLeave: (to, from, next) => {
     console.log("组件离开时的守卫 执行了");
     next();
}

12.滚动行为

var router = new VueRouter({
            routes,
            //savedPosition  位置信息
            scrollBehavior(to, from, savedPosition) {
               

            }
        })

13.页面切换时的动画效果

transition

14. 路由元信息 meta

后台 写 左侧菜单时，会使用 ，小图表 、 菜单权限