Vue3 Router-基础1

一、 安装

npm install vue-router@4

二、基础使用

定义路由

router.js

import { createRouter,createWebHashHistory} from 'vue-router' 

import About from '../components/About.vue'

const routes = [
    { path: '/about', component: About },
    //{ path: '/home', component: Home },
]

const router = createRouter({
    history: createWebHashHistory(),
    routes
}) 

export default router

注册路由

main.js

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


createApp(App).use(router).mount('#app')

使用路由

App.vue 

<template>
    <!-- 创建超链接 可以在不重新加载页面的情况下更改URL-->
    <router-link to="/about">Go to About</router-link>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</template>

三、 动态路由匹配

 1.基本的动态路由

使用 '/xxx/:id' 的方式可以匹配 /xxx路径，:id可以由目标路径模板{{$route.params.id }}参数获得

路由配置

 { path: '/user/:id', component: User }

跳转前

<router-link to="/user/123">跳转到user</router-link>

跳转后接收

<template>
<div>User: {{ $route.params.id }}</div>
</template>

2.多个路径参数

路由配置

{ path: '/user/:id/post/:code', component: User }

跳转前

<router-link to="/user/123/post/456">跳转到user</router-link>

跳转后接收

<template>
<div>User: {{ $route.params.id }}</div>
<div>Post: {{ $route.params.code }}</div>
</template>

3.路由的参数变化

 ???????????

<script>
export default {
  created() {
    this.$watch(
      () => this.$route.params,
      (toParams, previousParams) => {
        // 对路由变化做出响应...
        console.log('跳转到:');
        console.log(toParams);
        console.log('从跳转');
        console.log(previousParams);
      }
    )
  }
}
</script>

4.捕获所有路由或 404 Not found 路由

路由配置

{ path: '/:pathMatch(.*)*',component: NotFound }

跳转前

  <router-link to="/abc/def">跳转</router-link>

跳转后接收

<template>
    <div>404Page: {{ $route.params.pathMatch }}</div>
</template>

四、路由匹配的语法

 1.自定义参数的正则

    //匹配任意数量的数字,  d表示数字， +表示出现1次或多次
    //http://localhost:3000/124 符合
    //http://localhost:3000/12d 不符合
    { path: '/:id(\d+)', component: User }

2.参数可重复

+ 匹配一个或多个， *匹配0个或多个

    //http://localhost:3000/a/b/c/d
    { path: '/:id+', component: User }

获得数组

<template>
  <div>User: {{ $route.params.id }}</div>
</template>

3.可选参数

？表示 0次或者1次

    { path: '/:id?', component: User }

五、嵌套路由 

 路由配置

import User from '@/components/User.vue'

import UserA from '@/components/UserA.vue'

import UserB from '@/components/UserB.vue'

const routes = [
    { path: '/about', component: About },
    {
        path: '/user/:id?',
        component: User,
        //这里的渲染到子router-view
        children:[
            {
                path: 'A',
                component: UserA,
            },
            {
                path: 'B',
                component: UserB,
            }
        ]
    },
]

 User.vue

<template>
  <div>User: {{ $route.params.id }}</div>
  <router-view></router-view>
</template>

<script>

UerA.vue

<template>
  <div>UserA: {{ $route.params.id }}</div>
  <router-view></router-view>
</template>