语法

2023年05月18日

柏拉文

越努力，越幸运

一、基础路由

router.ts
main.ts
App.vue

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

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    component: () => import('../views/AboutView.vue')
  }
]

const router = createRouter({
  routes,
  history: createWebHistory(import.meta.env.BASE_URL),
})

export default router

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

const app = createApp(App);

app.use(router);
app.mount('#app')

<template>
  <div>
    <router-link to="/">首页</router-link>
    <router-link to="/about">关于</router-link>

    <router-view></router-view>
  </div>
</template>

<script setup lang="ts">
</script>

二、动态路由

router.ts
main.ts
App.vue
About.vue

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

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about1/:a',
    name: 'about1',
    component: () => import('../views/AboutView.vue')
  },
  {
    path: '/about2/:a/:b',
    name: 'about2',
    component: () => import('../views/AboutView.vue')
  }
]

const router = createRouter({
  routes,
  history: createWebHistory(import.meta.env.BASE_URL),
})

export default router

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

const app = createApp(App);

app.use(router);
app.mount('#app')

<template>
  <div>
    <router-link to="/">首页</router-link>
    <router-link to="/about1/哈哈">关于 动态路由一个参数</router-link>
    <router-link to="/about2/哈哈/嘻嘻">关于 动态路由两个参数</router-link>

    <router-view></router-view>
  </div>
</template>

<script setup lang="ts">
</script>

<template>
  <div class="about">
    <h1>This is an about page</h1>

    <div>
      参数: {{ a }}
    </div>

    <div>
      参数: {{ b }}
    </div>
  </div>
</template>
<script setup lang="ts">
import { computed } from "vue";
import { useRoute } from "vue-router";

const route = useRoute();

const a = computed(()=>{
  return route.params.a || ""
})

const b = computed(()=>{
  return route.params.b || ""
})

</script>

三、嵌套路由

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

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: "/about",
    name: "about",
    component: ()=> import('../views/AboutView.vue'),
    children: [
      {
        path: "",
        name: "content",
        component: ()=> import('../views/AboutContent.vue')
      },
      {
        path: "more",
        name: "more",
        component: ()=> import('../views/MoreView.vue')
      }
    ]
  }
]

const router = createRouter({
  routes,
  history: createWebHistory(import.meta.env.BASE_URL),
})

export default router

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

const app = createApp(App);

app.use(router);
app.mount('#app')

<template>
  <div>
    <router-link to="/">首页</router-link>
    <router-link to="/about">关于</router-link>
    <router-link to="/about/more">更多</router-link>

    <router-view></router-view>
  </div>
</template>

<script setup lang="ts">
</script>

<template>
  <div class="about">
    <h1>关于</h1>

    <router-view></router-view>
  </div>
</template>
<script setup lang="ts"></script>

<template>
  <div class="about">
    <h1>关于内容</h1>
  </div>
</template>
<script setup lang="ts"></script>

<template>
  <div class="about">
    <h1>关于更多</h1>
  </div>
</template>
<script setup lang="ts"></script>

一、基础路由​

二、动态路由​

三、嵌套路由​

一、基础路由

二、动态路由

三、嵌套路由