vue 和路由有关的所有问题

本博客会总结所有vue中和路由有关的问题，路由监控，权限，历史等

首先是路由最基础的问题：路由跳转

1、router-link

在vue2.0中替代了原来的v-link，

使用之前需要对路由进行配置

<router-link>组件支持用户在具有路由功能的应用中点击导航。通过to属性指定目标地址，默认渲染为带有正确连接的<a>标签，可以通过配置tag属性生成别的标签。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的css类名

以上这一句话个人目前还不是很懂，对于router-link的理解就是页面的跳转

<router-link>组件的属性有：
to 、replace、 append、 tag、 active-class、 exact 、 event、 exact-active-class

1.to

to（必选参数）：：类型string/location

表示目标路由的链接，该值可以是一个字符串，也可以是动态绑定的描述目标位置的对象

<router-link :to="{ path: '/home' }">Home</router-link>
    <router-link to='/goods/title'>显示商品标题</router-link>
/*
这个路径就是路由中配置的路径
*/
<router-link :to="{ name: 'User'}">User</router-link>
/*
  在路由的配置的时候，添加一个name属性，例如：
 routes: [
    {
      path:'/home',
      name:'User',
      component:home
    }
]

2.tag

类型: string 默认值: "a"

如果想要 渲染成某种标签，例如

。 于是我们使用 tag prop 类指定何种标签，同样它还是会监听点击，触发导航。

  <router-link :to="'index'"
               tag="li"
               event="mouseover">Home
  </router-link>

如果此时我们想要在这个li标签中添加a标签,如下所示，可以不为a标签添加href属性即可哦

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

在这种情况下， 将作为真实的链接 (它会获得正确的 href 的)，而 "激活时的CSS类名" 则设置到外层的

。

目前对于激活时的css类名不是非常理解

3.active-class

类型: string 默认值: "router-link-active"

设置 链接激活时使用的 CSS 类名。默认值可以通过路由的构造选项 linkActiveClass 来全局配置。

这个目前没有使用过，不清楚其在实际编码过程中的使用方法，下面也介绍一些，比较实用的属性

4、event

类型: string | Array 默认值: 'click'

声明可以用来触发导航的事件。可以是一个字符串。事件可以非常多样，鼠标移入，双击等

<router-link to="/document" event="mouseover">document</router-link>

如果我们不加event，那么默认情况下是当我们点击document的时候，跳转到相应的页面，但当我们加上event的时候，就可以改变触发导航的事件，比如鼠标移入事件

5、replace

类型: boolean 默认值: false

设置 replace 属性的话，当点击时，会调用 router.replace() 而不是 router.push()，于是导航后不会留下 history 记录。

$router.push({path:'home'});本质是向history栈中添加一个路由，在我们看来是切换路由，但本质是在添加一个history记录

$router.replace({path:'home'});替换路由，没有历史记录，点击返回，会跳转到上上一个页面

导航的hisrory相当于一个队列，this.$router.go(-2)   //后退两步，  @click="$router.back(-1)"等

6、append

类型: boolean 默认值: false

设置 append 属性后，则在当前 (相对) 路径前添加基路径

• 例如，我们从 /a 导航到一个相对路径 b，如果没有配置 append，则路径为 /b，如果配了，则为 /a/b

<router-link :to="{ path: 'relative/path'}" append></router-link>

a、商品列表页面如下（点击'跳转到购物车页面'就会跳到一个新的页面，而不是在同一个页面加载一个组件）

    jump(){
    //this.$router.push("/cart")
    //传递的参数用{{ $route.query.goodsId }}获取
    this.$router.push({path: '/cart?goodsId=12'})
    //this.$router.go(-2)
    //后退两步
    //this.$router.go(0) 刷新页面
    }

b、通过方法还需要修改路由文件src/router/index.js，其他方法不用看了

import Vue from 'vue'
import Router from 'vue-router'
import GoodsList from '@/views/GoodsList'
import Title from '@/views/Title'
import Image from '@/views/Image'
// 2、导入Cart组件
import Cart from '@/views/Cart'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      	path: '/goods',
      	name: 'GoodsList',
      	component: GoodsList,
      	children: [
      		{
      	  		path: 'title',
          		name: 'title',
          		component:Title	
      		},

      		{
      	  		path: 'image',
          		name: 'image',
          		component:Image	
      		}
      	]
    },
    // 1、写入购物车组件
    {
    	path: '/cart',
      	component: Cart,
    }
  ]
}) ````