Vue3 （router）路由使用方法

Vue3 路由使用方法

1.安装vue-router

安装的命令如下：

npm install vue-router@next -S

2.创建路由模块

在项目中创建 router.js 路由模块，在其中按照如下 5 个步骤创建并得到路由的实例对象：

router.js:

// 1 从vue-router按需导入两个方法
// createRouter方法用于创建路由实例对象
// createWebHashHistory方法用于指定路由的工作模式（hash模式）
import { createRouter, createWebHistory } from 'vue-router'

// 2 导入需要使用路由控制的组件
import ShoopingCar from '../views/ShoppingCar.vue'
import Home from "../views/Home.vue"

const router = createRouter({
  // 通过 history 属性，指定路由的工作模式
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/shoopingcar',
      name: 'ShoopingCar',
      component: ShoopingCar
    }, {
      path: '/home',
      name: 'Home',
      component: Home
    }
  ]
})

export default router

3.main.js绑定路由

main.js:

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)

app.use(router)

app.mount('#app')

3.使用路由

3.1：可以使用 标签来声明路由链接，并使用 标签来声明路由占位符。示例代码如下：

<template>
    <h1>App 组件</h1>
    <!-- 声明路由链接 -->
    <router-link to="/home">首页</router-link>&nbsp;
    <router-link to="/movie">电影</router-link>&nbsp;
    <router-link to="/about">关于</router-link>
    
    <!-- 声明路由的占位符 -->
    <router-view></router-view>
</template>

3.1.1：携带参数

query

   <router-link :to="{
                path: '/tabView',
                query: {
                  title: 'query路由传值tabView',
                },
              }"
   >首页</router-link>

query传参可以用name，也可以用path

  <router-link
              :to="{
                name: 'myComPany',
                params: {
                  title: '使用params进行company路由传参必须要用name命名',
                },
              }"
              >首页</router-link
            >

3.2： 编程式路由

因为setup() {} 里没有this，所有用 import { useRouter } from “vue-router”;

import { useRouter } from "vue-router";
export default {
  name: "Title",
  setup() {
    const router = useRouter();

    function goToShoopingCar() {
      router.push({
        name: "ShoopingCar",
      });
    }
    function goToHome() {
      router.push({
        name: "Home",
      });
    }
    return {
      goToShoopingCar,
      goToHome,
    };
  },
};