vue 的路由

本文已参与 「新人创作礼」活动, 一起开启掘金创作之路。

Vue 路由的配置 下载 npm i vue-router@3.5.3 这里是 vue2 所以需要指定 3 的版本 如果是 vue3 那么直接下载最新版本就行

import Vue from 'vue' // 引入 vue VueRouter
import VueRouter from 'vue-router'

// 引入路由组件
import login from '../components/login.vue'
import index from '../components/index.vue'
import foo404 from '../components/foo404.vue'

// 挂载 vue
Vue.use(VueRouter)

// 配置路由规则
const routes = [
  {
    path: '/',
    redirect: '/index' // 此处就是如果用户点击进来的第一个页面就是
  },
  {
    path: '/login/:username/:name',
    component: login
  },
  {
    path: '/index',
    component: index
  },
  {
    path: '*', // 404 页面得到路由规则
    component: foo404
  }
]

const router = new VueRouter({
  routes
})

// 导出
export default router

Vue 路由传参 分为: query 传参适用于: 页面搜索和 paeams 传参适用于详情页

1. query 传参:

// 路由规则
  {
    path: '/index',
    component: index
  },

<template>
  <div>
    <h1>皇上该翻牌子了</h1>
    <!-- to="/index?age='88'&name='小顾'" 的方式传参 -->
    <router-link to="/index?age='曾美丽'">去 一号爱妃 index</router-link><br>
    <!-- <router-view></router-view> 路由出口都需要配置 -->
    <router-view></router-view>
  </div>
</template>

<template>
    <div>
      <!-- this.$route.query.age  的形式接收参数 标签里面接收去掉 this -->
        <h2>我是 index 标签</h2>
        <p>{{$route.query.age}}</p>
    </div>
</template>

2. params 传参:

{
    name: 'xiaogu',
    // 路由规则书写方式
    path: '/login/:username/:name',
}

<template>
  <div>
    <h1>皇上该翻牌子了</h1>
    <!-- to="/login/祖师爷/恶魔波冈" 传参方式, 上面路由规则配置过了, 这里直接书写 /祖师爷/恶魔波冈 的模式 -->
    <router-link to="/login/祖师爷/恶魔波冈">去 二号爱妃 login</router-link><br>
    <router-view></router-view>
  </div>
</template>

<template>
    <div>
        <h2>我是 login 组件</h2>
        <!-- this.$route.params.username 接收方式 params -->
        <p>我是小哥哥 {{$route.params.username}}</p>
        <p>小姐姐: {{$route.params.name}}</p>
        <router-view></router-view>
    </div>
</template>

Vue 编程式导航传参 也就是触发事件的传参。

1. query 的传参:

  methods: {
    bar () {
      // query 传参
      this.$router.push("/index?age='曾美丽'") // 简写方式
      this.$router.push({
        path: '/index',
        query: {
          name: '小顾',
          age: 14
        }
      })
    }
  }

2. params 的传参:

  methods: {
    bar () {
        // params 传参
      // this.$router.push('/login/祖师爷/恶魔波冈') // 简写方式
      this.$router.push({
        name: 'xiaogu',
        params: {
          name: '小顾',
          age: 18
        }
      })
    }
  }

Vue 路由默认跳转到主页 路由重定向 路由规则: 建议书写在路由规则最前面

  {
  path: '/',
  redirect: '/index' // 路由重定向到 index 页面
}

Vue 404路由规则

  {
    path: '*', // 404 页面得到路由规则
    component: foo404
  }

Vue 路由的嵌套 都是在其中的路由规则在添加一个 children[] 然后在里面再次添加规则

  {
    name: 'xiaogu',
    path: '/login/:username/:name',
    component: login,
    children: [
      {
        path: '', // path 为空的时候, 表示到 login 的时候默认展示这个组件
        component: kong
      },
      {
        path: '/bar', // 就是会点击展示这个组件
        component: bar
      },
      {
        path: 'usa', // 不加 / 就是只能在浏览器导航手动输入路径 http://192.168.87.181:8080/#/login/%E7%A5%96%E5%B8%88%E7%88%B7/%E6%81%B6%E9%AD%94%E6%B3%A2%E5%86%88/usa
        component: USA
      }
    ]
  }