Vue路由vue-router

router介绍

router是一个被vue官方收纳的插件，在我们项目建完之后就会出现一个

router.js文件，我们只需要在这个文件下配置相应的路由，就可以实现

url与页面一一对应的关系

router配置

import About from "./views/About";  //先导入

Vue.use(Router);

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/about',   // url的路径
      name: 'about',    // url对应的名字，可以用作反向解析
      component: About  // template解析
    },
    {
      path: '/goods',
      name: 'goods',
      component: () => import('@/views/Goods.vue')  //直接通过这种导入返回给component
    }
  ]

上面的两种导入方式，建议使用第一种

router使用

下面所有使用的路由均用上面配置的路由

基本使用

1. 首先在根组件下面配置<router-view />

<template>
  <div id="app">
    <router-view/>  <!--用来解析不同路由对应的template到这-->
  </div>
</template>

2. 在使用页面上配置router-link标签

<router-link to="/about">关于</router-link>

当渲染完之后，router-link标签会被渲染成a标签， to后面的路径就是a标签的href路径

router-link与a标签的区别

router-link渲染完之后就会变成a标签，但与a标签有区别

router-link路由跳转不会刷新页面，而a标签会重新刷新页面

name的使用

通过把 router-link标签的to 变成绑定属性来使用路由的name

<router-link :to="{name:'goods'}">商品</router-link>

路由重定向

  routes: [
    {
      path: '/home',
      name: 'home',
      //component: () => import('@/views/Home.vue'),    有了redirect之后就不需要解析自己的了
      redirect: '/goods'  // redirect重定向，后面直接跟path
    }
  ]

路由传参

1. 在路由端配置变量接收参数

router.js中

routes: [
    {
      // path: '/goods/detail/',
      // 首先我们需要明确一点，就是跳转的url与这里的path必须完全相同才能访问
      path: '/goods/detail/:id',
      // 而当path中出现 :变量  的时候，这个变量就可以接收这个位置的任何值
      // 上例如果url是/goods/detail/1   那么会被上面的path匹配上，并且把1传给变量id
      // 并且这个 :变量 可以出现在path中的任何位置
    name: 'goods_detail',
    component: GoodsDetail
  },
]

跳转页面

拼凑出要访问的url

<router-link to="/goods/detail/7"><li>商品</li></router-link>

渲染页面

created() {
    this.$route.params  // 可以拿到对应router的path中变量对应的数据
}

2. 在url处配置?拼接的访问方式

router.js中

routes: [
  {
    path: '/about',
    name: 'about',
    component: () => import('@/views/About.vue')
  },
]

跳转页面

？拼接url

<router-link to="/about?pk=3">关于</router-link>

渲染页面

this.$route.query  // 可以拿到对应url?拼接的数据

3. push方法发送

路由不变

在template中

<button @click="sendParams">点击发送</button>
<!-- 绑定一个监听事件，点击就发送数据 -->

跳转页面

methods:{
    sendParams () {         //发送数据的方法
        this.$router.push({     // push方法发送数据
            name:'goods',       // 发送到哪对应路由的name
            params:{            // 发送数据的方式，可以是params也可以是query
                age:123,
                name:'sss'
            }
        })
    }
}

渲染数据

//如果前面是params传，就用params取，如果是query传，就用query取
this.$route.params

this.$router与this.$route区别

this.$router控制的是url

this.$route控制的是数据

通过方法实现跳转的三种方式

1. this.$router.push　　

this.$router.push({
    path: '/home',   //可以通过path传
    name: 'home',    // 也可以根据路由的name传
    //也可以通过params或者query携带参数
    query: {}
})

2. this.$router.go

this.$router.go(1);  //括号里写的是数字，1代表向后一页(不常用)
this.$router.go(-1)  // -1代表向前一页(常用)

3. this.$router.replace

this.$router.replace('/home')   
//跳转到指定的url， 但是history中不会有记录，点击返回会回到上上页(不常用)