vue-router路由入门

vue-router
介绍：
是vue的一个插件，用来提供路由功能，vue官方的路由管理器
他与vue的核心深度集成，所以构建单页应用十分简单。

功能：
嵌套的路由
基于模块化的、基于组件的路由配置
路由参数、查询、通配符
HTML5中history和hash模式
自定义的滚动行为
基于vue过度系统的视图过渡效果
细粒度的导航控制
使用：
·安装
1.cdn

  <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.4.3/vue-router.min.js"></script>

2.npm
npm install cue-router
如果在一个模块化工程中使用必须使用Vue.use()来明确的安装路由功能
import Vue from ‘vue’
import VueRouter from ‘vue-router’
Vue.use(VueRouter)
3.框架
·使用

  <router-view></router-view>

路由匹配的组件就要渲染在这里

<router-link></router-link>

使用他来进行导航 他会被渲染成一个标签
// 1.定义路由组件
let foo = {
template:<div>this is foo</div>
};
let bar = {
template:<div>this is bar</div>
};
// 2.定义路由

      var router = new VueRouter({
                routes:[
                    {path:"/foo",component:foo},
                    {path:"/bar",component:bar},
  ]
   })

//3.组件注册

var vm = new Vue({
    el:"#app",
    // data:{},
    // methods:{},
    router,
})

动态路由匹配
介绍
动态参数
组件复用
用户的组件
id:xxx
姓名：xxx
年龄：xxx
使用：
动态路径的参数使用":"开头

  //定义路由
        var router = new VueRouter({
            routes:[
                {path:"/foo",component:foo},
                {path:"/bar",component:bar},
                {path:"/user/:id",component:user},

            ]
        })
        //传参
        <router-link to="/user/1">跳转到user1</router-link>
        //接收参数
        let user={
            template:`
            <div>this is user{{$route.params}}</div>
            `
        };

当使用路由参数的时候，从/user/1/larry/18
导航到/user/2/terry/20的时候，那组件user实例就会复用，比起销毁在创建，复用显得更加高效
组件被复用，不会重新创建导致一个问题，生命周期钩子就不会被调用了，这时候我们只用watch来监测$route对象的变化。

 watch:{
        $route(to,from){
            console.log(to);
            console.log(from);
        }
             }

还可以通过导航守卫来监测 （to，from）
嵌套路由：

 <router-view></router-view>

组件中也可以使用来渲染高级路由匹配到的组件
我们需要在router的定义中使用children定义

   //定义组件
let user={
template:`
<div>this is user<br>
    ID:{{$route.params.id}}<hr>
    Name:{{$route.params.name}}<hr>
    Age:{{$route.params.age}}<hr>
    <div>嵌套的组件在👇<div>
    <router-view></router-view>
    </div>
`,
}
   //定义嵌套路由 
    children:[
        {path:'foo',component:foo},
        {path:"bar",component:bar},
    ]

使用

<router-link to="/user/3/tom/19/foo">user组件嵌套foo</router-link>
  <router-link to="/user/3/jack/21/bar">user组件嵌套bar</router-link>

命名路由：
介绍：
在配置路由的时候，我们可以指定name属性，相当于为这个路由进行命名，方便后期的路由跳转。
定义：

 var router = new VueRouter({
            routes:[
        {path:"/foo",name:"foo",component:foo},
        {path:"/bar",name:"bar",component:bar},
        {path:"/user/:id/:name/:age",name:"user",component:user},

               ]
              })

使用：

  <router-link :to="{name:'user',params:{id:9,name:'terry',age:22}}">使用name跳转到user2</router-link>
    要给<router-link></router-link>的to属性传递一个对象
    注意 :to="{name:'user',params:{id:9,name:'xxx'}}"

命名视图：
默认：

  <router-view></router-view>

    具名：

   <router-view name="a"></router-view>

我们想同时展示多个视图，那么一个不够用，name定义
重定向
介绍：
当用户访问/a,URL会被替换为/b,然后匹配/b对应的组件
定义：
通过redirect来定义
{path:"/a",name:“a”,redirect:"/b"},
{path:"/b",name:“b”,component:b},
{path:"/c",name:“c”,redirect:{name:“b”}},
使用：
重定向:访问/a,匹配到b的组件
重定向:使用name,访问/c,匹配到b的组件
别名：
介绍
/a的别名是/b,意味着用户访问/b的时候，路由匹配的组件/a，但是url还是保持/b
不论是访问/a还是访问/b,打开的组件都是一样的(a)
定义
alias关键字
var router = new VueRouter({
routes:[
{path:"/foo",name:“foo”,component:foo,alias:"/fdd"},
]
})
使用：

 <router-link to="/foo">跳转到foo</router-link>
             <router-link to="/fdd">跳转到fdd</router-link>

编程式导航：
定义：
除了 创建a标签定义导航连接之外，我们还可以使用router
的实例方法，通过编写代码来实现。
在vue实例中，我们可以通过$router访问路由实例
方法：
1.router.push(参数) 像history栈中添加一个新的记录
router.push(‘home’);//字符串
router.push({path:‘home’}) //传递对象
router.push({name:‘user’,params:{id:9}}) //命名路由，同时传递参数
router.push({path:‘url’,query:{plan:‘xxx’}})
//url?plan=xxx,当参数是path而不是name的时候，params不生效，只能通过query来传参
2.router.replace(参数) 不产生新的history记录，而是替换当前的history记录
方法与router.push(类似)
3.router.go(number)
参数是一个整数(1,2,-1,-2)
在history中前进或后退几步，类似于window.history.go(number)
路由模式有两种:
history模式与hash模式
介绍
默认情况:mode:“hash”
vue-router 默认使用的是hash模式,当url改变时,页面不会重新加载
hash模式url太难看,我们可以使用history模式
hash url:file:///D:/briup%20study/vue/day05/%E8%B7%AF%E7%94%B1.html
history url:http://127.0.0.1:5500/day05/%E8%B7%AF%E7%94%B1.html

使用history模式需要服务器支持,需要后台支持
使用
mode:“history”
导航守卫
介绍:
导航就是路由在发生改变,导航守卫就是用来通过跳转或取消的方式来守卫导航
种类
全局的
单个路由独享的 组件级的
1.全局前置守卫
router.beforeEach

导航守卫是异步解析的，在next调用之前,导航守卫一直处于等待的状态
next():一定要调用这个方法来结束这个钩子,如果不调用,那么导航无法跳转
next的几种状态和方法:
next("/path"):跳转到另外一个地址
next(error):导航就会被终止
2.全局解析守卫
router.beforeResolve
与前置守卫类似，区别是在导航被确认前，同时所在组件守卫和异步路由组件被
解析之后，解析守卫才会被调用

3.全局后置钩子
router.afterEach((to,form)=>{})
不会接收next(),也不会改变导航本身
4.路由独享守卫
直接定义在路由配置上的守卫
beforeEnter:(to,form,next)=>{
console.log(“foo路由独享守卫”)
}
参数和全局守卫的参数是一致的
5.组件内的守卫
beforeRouteEnter
beforeRouteUpdate
beforeRouteLeave
完整的导航解析流程：
导航被触发
在失活的组件内调用beforeRouteLeave守卫
调用全局前置beforeEach守卫
在重用的组件中调用beforeRouteUpdate守卫
在路由中的调用beforeEnter
解析组件
在激活的组件中调用
导航就被确认
调用全局后置钩子afterEach（to，from）
Dom更新
控制滚动行为