路由

路由

1. 使用路由的两个标签及其作用？

   1.定义路由视图(显示当前路由所对应的组件)
   <router-view></router-viwe>
   2.实现路由跳转
   <router-link></router-link>
   

2. 嵌套路由的使用流程?

   1).在组件中添加路由
   
   2.在路由中添加子路由规则

3. 命名视图的作用与使用流程？

   作用：为了同时显示多个视图
   如果 router-view 没有设置名字，那么默认为名字为 default
   

   使用流程如下图
   

4. 嵌套命令视图作用与使用流程？

   作用：为了让组件的所有路由视图显示出内容
   使用流程：
   1)首先在某个组件中写上几个router-view视图
   var Twoc = Vue.extend({
       template: `<div>   
     
     
       <router-link to="/two/1">one-item</router-link>
       <router-link to="/two/2">two-item</router-link>
       <router-link to="/two/3">three-item</router-link>
       <router-view></router-view>
       </div>`
   })
   2）然后在路由配置中实现对应的嵌套路由配置即可。
    {                path: '/two',
                   component: Twoc,
                   children: [{
                           path: '',
                           component: {
                               template: '<div>默认</div>'
                           }
                       },
   
                       {
                           path: '1',
   
                           component: {
                               template: '<div>1111</div>'
                           }
                       }, {
                           path: '2',
                           component: {
                               template: '<div>222</div>'
                           }
                       },
                       {
                           path: '3',
                           component: {
                               template: '<div>3333</div>'
                           }
                       }
   
   
                   ]
               }
   
   
   
   

5. 命名路由，路由别名，路由重定向的区别？

   1):命名路由

    目的： 通过名称找到真正路由
    使用流程：
     1:路由配置
     const router = new VueRouter({
   	routes: [
   	{
   		path: '/bar',
   		component: Bar,
   		name: "mybar",
   	}
   	]
   });
   2)具体使用
   编程式：
   this.$router.push( { name: 'mybar'} );
   声明式：
       <router-link :to="bar" >Go to Bar</router-link>
       var myVue = new Vue({
   
           el: " #app ",
           data: {
               bar: { name: "mybar" }
           }
    })
   

   2）路由别名

   /a 的别名是: /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样。
   const router = new VueRouter({
    routes: [
    { path: '/a', component: A, alias: '/b' }
    ]
   })
   

   3. 路由重定向

   当用户访问 /a时，URL 将会被替换成 /b，然后匹配路由为 /b
   3种方式:将路由规则中component选项修改为redirect
    1)根据路由路径重定向
      {   
      path: '/one',
       name: "myone",
      //component: Onec,
       redirect: "/three",//根据路由路径重定向（2,3替换处）             
     }
    2)根据路径名称重定向(直接在1中替换)
      redirect: {
          name: "myThree"
          }
    3)通过函数返回真正路由
       redirect: () => {
                    return "/three"
                 }        
   

6. 声明式路由和编程式路由的区别？

   区别：
      1）声明式路由：用<router-link></router-link>实现，编程式路由通过JavaScript实现路由控制
      2)实现不同路由切换：声明式路由:<router-link :to="..."> 等同于调用router.push(),编程式路由:router.push()或者router.replace()
      
      
   

7. 路由传参的几种方式？

   1)直接在to的后面拼接参数信息，用this.$route.query获取参数(字符串)
   <router-link to="/one?name=lis&age=12"></router-link>
   
   2)路径的动态参数:用$route.params获取参数信息(对象)
   //前端渲染(传入对应的参数)
     <router-link to="/user:88/vip:3333">超级会员</router-link>
   //配置相关路由（冒号分割）
    {
                   path: '/user:id/vip:num',
                   component: Userc
   
               },
   
   

8. 路由的几个钩子函数的作用？

   ①　beforeRouteUpdate

   ②　beforeEach

   ③　AfterEach

   ④　说下路由守卫与next关系

   1)beforeRouteUpdate:监听【动态的路径参数】的变化;
   2)beforeEach:在路由改变前触发;
   3)AfterEach:在路由改变后触发;
   4)路由守卫与next关系:路由守卫就是利用next方法实现的。
   

9. History 模式与hash 模式的区别？

   1)history模式：类似于真正的url网址
   利用了window.history.replaceState或者window.history.pushState
   弊端：不能手动刷新，一刷新它就去后端找真正的接口地址，会报404
   解决方案：在项目的根目录下创建一个文件serve.js来解决这个问题【后端创建相关的接口】  
   2)hash模式：似于我们在地址栏所看到的描点链接 含有#
   获取锚点：window.location.hash