Vue路由采坑记

[TOC]

容易疏忽的点

注册要注册到根实例上

[danger] router为关键字属性，非自定义

import from router from '../router'
new Vue({
    router
})

一个组件的顶层只能有一个元素

<template>
    <div></div>
</template>

如何显示默认路由？如何在有子路由的时候切换路由后显示默认子路由？

答1：将默认路由的router-link的to和路由注册时的path都设置为''

---

答2:

• 将默认路由的path设置为'',''表示当前，即路由切换时不带子路径时候的path
• 将默认路由的<router-link> 的 to属性设置为父组件的path

[warning] 注意: children 中的子路由正常来说应为相对路径，但也可设置为绝对路径，这并不影响子路由组件组件的显示，但url路径上会有所区别。

默认路由的激活样式一直处于激活态，何解？

答：在默认路由的router-link上设置exact精确样式匹配属性。

如何进行路由跳转?路由跳转有几种方式?

,{
      //对未匹配的路径进行跳转
      /**
       * 跳转方式一：不会改变url
       */
      path:'*'
      // ,component:notfound

      /**
       * 跳转方式二:会改变url
       */
      // ,redirect:'/home' //手动对path进行修改后跳转
      // ,redirect:{path:'/home'}  //对象形式修改，支持变量
      // ,redirect:{name:'about'} //name为注册路由时对应路由所取的名字，为上面的快捷用法
      
      ,redirect:(to)=>{ //动态设置重定向的目标
        if(to.path === '/fwf'){
          return '/home'
        }else if(to.path === '/xvw'){
          return {path:'/document'}
        }else{
          return {name:'about'}
        }
        // console.log(to); //to为目标路由的对象
        // return '/home';
      }
}

name是什么？有什么用？

注册时该条路由取的名字

第一种情况，name为路由注册时所取的名字

重定向

在重定向的时候直接用name 代表 path 进行跳转，是一种快捷语法。

redirect:{name:'about'} //name为注册路由时对应路由所取的名字，为上面的快捷用法

linkTo

在router-link上也可使用注册路由时路由所取的name对href进行设置，点击link时会自动跳转到该name路由的path

<router-link :to="{name:'about'}" tag="li">work</router-link>

一路多图

第二种用法是一个路由对应多个视图时对除了路由默认视图的视图进行标注，以便引入对应的路由。在路由切换时，一个路由可以对应多个视图router-view，这时候我们就需要区分不同的 router-view ，所以就需要取个名字。

<router-view name="addV"></router-view>
<router-view></router-view>
//-----------------------------------------------------
 ,{
  path: '/document',
  name: 'Document',
  // component:
  components:{ //一个路由对应多个视图
    default:main, //default为关键字 ,没有取名的路由视图，必须的。main为引入的组件名
    addV:other //addV为附加的router-view上取的名字,other为引入的组件所取的名字
  }
}

如何更改默认link的标签类型?

行内修改法

直接在ink标签上利用tag属性进行修改

<router-link :to="index" exact tag="li" class="class1" event="mouseover">

如何更改默认激活样式的类名?

行内修改法

直接在link标签上利用active-class进行修改

<router-link to="/about" active-class="diy">about</router-link>

---

[info] 未完待续...