02. Vue-router

简单示例

入门 | Vue Router (vuejs.org)

需要先创建Home.vue和Login.vue文件

<!--Home.vue-->
<template>
    <div class="home-wrap">
        <span>Home组件</span>
    </div>
</template>
<!--Login.vue-->
<template>
    <div class="home-wrap">
        <span>Login组件</span>
    </div>
</template>

1. src/router.index.js中创建routes将路径和组件绑定，然后创建一个路由对象并导出。

   这里的 routes 选项定义了一组路由，把 URL 路径映射到组件。其中，由 component 参数指定的组件就是后面要在 <RouterView />中 渲染的组件。这些路由组件通常被称为视图，但本质上它们只是普通的 Vue 组件。注意如果你想使用浏览器的url跳转页面，需要用createWebHistory()替代createMemoryHistory()，下面的代码不能直接在浏览器搜索栏中输入url跳转到对应页面。

import { createMemoryHistory, createRouter } from "vue-router";

import Home from "@/components/common/Home.vue";
import Login from "@/components/page/Login.vue"

const routes = [
    {path: '/home', component: Home},
    {path: '/login', component: Login},
]

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

export default router;

2. App.vue根组件中：在这里我们创建一个位置用来渲染路由地址对应的组件，用<RouterView />表示，相当于先占一个位置。

   不同于常规的 <a> 标签，我们使用组件 RouterLink 来创建链接。这使得 Vue Router 能够在不重新加载页面的情况下改变 URL，处理 URL 的生成、编码和其他功能。我们将会在之后的部分深入了解 RouterLink 组件。

   RouterView 组件可以使 Vue Router 知道你想要在哪里渲染当前 URL 路径对应的路由组件。它不一定要在 App.vue 中，你可以把它放在任何地方，但它需要在某处被导入，否则 Vue Router 就不会渲染任何东西。

<template>
  <nav>
    <RouterLink to="/home">Go to Home</RouterLink>
    <RouterLink to="/login">Go to Login</RouterLink>
  </nav>
  <span>
    <RouterView />
  </span>
</template>

3. main.js中注册路由器插件

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

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

动态路由

如果想让多个url都显示同一个模版，比如/login/xiaoming，/login/xiaofang，都显示Login组件，修改routes如下：下面定义了两个动态路由，动态字段以：开始。

const routes = [
    {
        path: '/login/:id', 
        component: Login,
        
    },
    {
        path: '/login/:id/posts/:postId',
        component: Login,
    }
]

Login.vue中修改如下，可以显示当前路由的参数

<template>
    <div class="home-wrap">
        <span>Login组件</span>
        <div>{{ $route }}</div>
        <div>{{ $route.params.id }}</div>
    </div>
</template>

嵌套路由

之前是在App.vue中添加了顶层路由出口，我们也可以在一个非根模版，比如Home模版中添加路由出口，以匹配当前路由下的子路由，Home.vue中修改如下：

<template>
    <div class="home-wrap">
        <span>Home组件</span>
        <div class="child-wrap">
            <router-view></router-view>
        </div>
    </div>
</template>

index.js中修改如下：…代表省略内容，如果我们访问/child则会渲染Children模版，child就是/下面的嵌套路由。

import { createRouter, createWebHistory} from "vue-router";

import Children from "@/components/page/Children.vue";
...

const routes = [
    {
    path: '/', 
    component: Home,
        children: [
            {
                path: 'child',
                component: Children,
            },
        ] 
    },
	...
]

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

export default router;