Vue-Router基本使用

一、基本使用

1、安装命令：

npm install vue-router

2、配置

新建router配置文件 src/router/index.js

//该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";
//引入组件
import Home from '../components/Home'
import About from '../components/About'

//创建并暴露一个路由器
export default new VueRouter({
    routes:[
        {
            path:'/about/:id',
            component:About
        },
        {
            name:'home',  // 命名路由
            path:'/home',
            component:Home
        }
    ]
})

在main.js中引用

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import router from './router'

Vue.config.productionTip = false
Vue.use(VueRouter)

new Vue({
    el:"#app",
    render: h => h(App),
    router
})

创建要被路由的组件

<template>
  <h2>Home组件的内容</h2>
</template>

<script>
    export default {
        // 注意此处一定要配置name
        name:'Home'
    }
</script>

3、使用

声明式路由跳转

<router-link to="/home">Home</router-link>

编程式路由跳转

// 字符串
router.push('home')

// 对象
router.push({ path: 'home' })

// 命名的路由，使用这样的传参一定要命名路由，参数不在url中显示
router.push({ name: 'user', params: { userId: '123' }})

// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

路由展示占位

<router-view></router-view>

二、路由传参

1、RestFul风格

路由配置

{
// 后面的id为准备接受的参数
   path:'/about/:id',
   component:About
}

参数传递

// 声明式，跳转至about时，参数id为1，url:/about/1
<router-link to="/about/1">Home</router-link>

// 编程式
this.$router.push({ path:'/about/2' })

参数接收

this.$route.params.id

2、Params传参，需要是命名路由，Url中不会展示参数，刷新后参数失效

路由配置

{
  name:'home',  // 命名路由
  path:'/home',
  component:Home
}

参数传递

// 声明式
<router-link :to="{name:'home',params:{id:4}}">home</router-link>

// 编程式
this.$router.push({
      name:'home',
      params: {
           id: 3
      }
})

参数接收

this.$route.params.id

3、query来传递参数，参数会跟在Url后面，类似get请求 /about?id=，刷新参数不会丢失

路由配置

{
    path: '/about',
    component: About
},

参数传递

// 声明式
<router-link :to="{path:'/about', query: {id: 5}}">About</router-link>

// 编程式
this.$router.push({
    path:'/about',
    query: {
        id: 6
    }
})

参数接收，注意这里是 query

this.$route.query.id