1. 安装vue-router

npm install vue-router --save

2. 路由配置

在项目的 src 目录下创建 router.js 文件，将其导入入口文件 main.js 内。

// main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router.js';
 
Vue.config.productionTip = false
 
new Vue({
  // router 路由必须加在挂载点上
  router,
  render: h => h(App),
}).$mount('#app')


// router.js

import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/views/Home.vue';
import About from '@/views/About.vue';
 
 
// 插件挂载
Vue.use(Router)
 
export default new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      // 路由懒加载
      component: () => import('./views/About.vue')
    }
  ]
})

3. 路由模式

哈希模式(默认)

url形式： http://localhost:8080/#/about

使用 @/views/About.vue 内的@是哈希模式，可以动态监听路由内的组件变化。

history模式(更好)

使用的是HTML5的history API，搜索引擎友好，可读性强，便于维护，页面不会刷新。

url形式： http://localhost:8080/about

在 router.js 的 Router 实例内, 设置 mode 属性值为 history。

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

部署时，需要将根页面的全部后缀路由指向根路由。否则会找不到页面。

# NGINX配置：

location / {
  try_files $uri $uri/ /index.html;
}

4. 路由传参

{
    path: '/home/:msg',
    name: 'home',
    component: Home
}

this.$router.push

this.$router.push('/home/vuejs111')

// 使用path会影响路径，所哟我们需要使用路由名称name。
this.$router.push({name: 'home',params:{id:1, msg: 'vuejs111'}})


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

获取传参

// 在vue视图组件模板内获取
<p>{{ $route.params.msg }}</p>

// 在生命周期函数内获取（需要添加this）：
this.$route.params.msg

查询参

<router-link to="/home/vuejs?foo=bar">home</router-link>

获取传参

this.$route.query.foo

props传静态值

{
    // 给组件传静态值
    path: '/static',
    component: Page1,
    props: {
        foo: 'bar'
    }
},

props:{
    foo: { type: String, default: '' }
  // foo: String
},

获取传参

<h3>foo:{{ foo }}</h3>
this.foo

props传递函数

路由

{
    path: '/home/:id/:msg',
    name: 'home',
    component: Home,
    props: func
}

function func({params, query}){
    return {
        id: params.id,
        msg: params.msg,
        foo: query.foo
    }
}

URL路径

<router-link to="/home/1/vuejs?foo=bar">home</router-link>

获取传参

<template>
    <div>
        <h3>home</h3>
        <!-- 获取路由路径的参数 -->
        <p>id:{{ $route.params.id }}</p>
        <p>msg:{{ $route.params.msg }}</p>
        <p>foo:{{ $route.query.foo }}</p>
        
        <!-- 通过属性获取 -->
        <p>id:{{ id }}</p>
        <p>msg:{{ msg }}</p>
        <p>foo:{{ foo }}</p>
    </div>
</template>
 
<script>
    export default {
        props: ['id','msg','foo'],
        created(){
            console.log(this.$route.params.msg);
            // 查询参
            console.log(this.$route.query.foo);
        }
    }
</script>

Vue路由Vue Router创建、传递参数、路由守卫 https://blog.csdn.net/a18792627168/article/details/105246114

深入了解组件 - Prop https://cn.vuejs.org/v2/guide/components-props.html