router使用

router/index.ts

• (1) 普通路由
• (2) 命名路由
• (3) 嵌套路由

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      // (1)
      // 普通路由
      path: '/',   
      component: HomeView
    },
    {
      path: "/about",
      // (2)
      // 命名路由
      name: "about", 
      component: () => import("..."),
      // (3)
      // 嵌套路由
      children:[
        {
        	// 匹配 /about/a
      		path: '/a',
      		name: 'a',
      		component: () => import("..."),
    	},
        {
        	// 匹配 /about/b
      		path: '/b',
      		name: 'b',
      		component: () => import("..."),
    	},
  	  ]
    },
  ]
})

export default router

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");

使用

// 替换当前位置
<!-- 普通路由 -->
<router-link :to="{ path: '/home' }">Home</router-link>
<router-link :to="{ path: '/home' , query: { userId: '123' }}">User</router-link>

<!-- 命名路由 -->
<router-link :to="{ name: 'user', params: { userId: '123' }}">User</router-link>

<!-- 替换当前位置 -->
<RouterLink to="/about/" replace>/about/</RouterLink>

<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>


<!-- 使用数据 -->
<h1>{{ $route.params.name }}</h1>

编程式导航

import { useRouter } from "vue-router";
let route = useRouter();
let routerTo = () => { 
    // (1)
    // 普通路由
    // 带查询参数，结果是 /path?name=username
    route.push({ path: '/path' , query: { name: 'username' }});
    
    // (2)
    // 命名路由
    // 带查询参数，结果是 /path?name=username
    route.push({ name: 'path' , params: { name: 'username' }});
    
    // 带 hash，结果是 /path#team?name=username
    route.push({ path: '/path' , hash: '#team' , query: { name: 'username' }});
 
     // 替换当前位置
    route.push({ path: '/path' , replace: true , query: { name: 'username' }});   
    
};