Vue Router 学习笔记

建立 router

安装 vue-router npm install vue-router --save

建立 routes.js ，用来设定 router path 跟相对应的 component

import { createRouter, createWebHashHistory } from "vue-router";import HomePage from "./views/HomePage.vue"; // 引入 componentimport CreatePage from "./views/CreatePage.vue";// 设定路由 path、对应的 componentconst router = createRouter({    history: createWebHashHistory(),    routes: [        { path: '/', component: HomePage },        { path: '/create?', component: CreatePage }    ]})export default router

在 main.js 引用 router: app.use(router)

import { createApp } from 'vue'import App from './App.vue';import router from './routes'const app = createApp(App);app.use(router);app.mount('#app')

用 <router-view></router-view> 就可以选染出 router 设定好的 component

<template>  <navbar></navbar>  <router-view></router-view></template>

---

好用的语法

<router-link to="/"></router-link>
建立路由连结，类似 <a href="">

router-view
可以将连结(url) 对应的 component 渲染

Router 设定

若要在 path 传递参数可用 :
假设有一个编辑页面 id 不同，可以在 path 写 :id 带入 id

import PageEdit from "./views/PageEdit.vue";// 设定路由 path、对应的 componentconst router = createRouter({    history: createWebHashHistory(),    routes: [        { path: '/', component: HomePage },        { path: '/create?', component: CreatePage },        { path: '/:id/edit', component: PageEdit }    ]})

在 component 里再用 $route.params.id 取得 id

<template>  <h4>Edit page {{ $route.params.id}}</h4></template>

若要将 id 作为 props ，可加上 props: true

import PageEdit from "./views/PageEdit.vue";// 设定路由 path、对应的 componentconst router = createRouter({    history: createWebHashHistory(),    routes: [        { path: '/', component: HomePage },        { path: '/create?', component: CreatePage },        { path: '/:id/edit', component: PageEdit, props: true } // 后面多加上一个 props: true 就可以被当作 prop 来使用    ]})

用 Children 实现在 router 里面再一个 router (Nested Routes)
假设 page 有一个编辑页面、一个新增页面，想要放在 pages 的 path 里面，可用 children 写在 pages 的 path 里面

编辑页面的 url : http://localhost:8080/#/pages/1/edit新增页面的 url : http://localhost:8080/#/create

const router = createRouter({    history: createWebHashHistory(),    routes: [        { path: '/', component: HomePage , props: true },        {            path: '/pages',            component: Pages,            children: [                { path: 'create', component: CreatePage },                { path: ':index/edit', component: PageEdit, props: true }            ]        },    ]})