vue（七）路由 vue-router

// 导入路由库
import {createRouter,createWebHashHistory} from "vue-router" 
// 导入静态页面
import Homeview from "../views/Homeview"

// 创建路由定义数组
const routes=[
    {
        path:"/",   // 指定路径
        name:"home",
        component:Homeview  //指定页面的组件
    },
    {
        path:"/about",
        name:"about",
        component: () => import ("../views/Aboutview") //异步加载，未使用就不加载，使用才加载
    }
]
// 创建路由
const router=createRouter({history:createWebHashHistory(),routes})

export default router;

// 路由后面带#，如 http://localhost:8080/#/about
// 不需要后端处理重定向
// 原理：a标签锚点链接
// 推荐
const router=createRouter({history:createWebHashHistory(),routes})

// 页面显示 http://localhost:8080/about
// 需要后端处理重定向，否则出现404
// 原理：H5的pushState()
// 不推荐
const router=createRouter({history:createWebHistory(),routes})

import router from './route'

const app= createApp(App)
app.use(router)

<template>
    // 指定路由显示入口
  <RouterView></RouterView>
  // 指定路由跳转，to=route/index.js中定义的path
  <RouterLink to="/">首页</RouterLink>
  <RouterLink to="/about">关于页面</RouterLink>
</template>

const routes=[
    {
        path:"/about/:pageFrom", // :后设置参数 pageFrom
        name:"about",
        component:Aboutview
    }
]

<RouterLink to="/about/从首页来">关于页面</RouterLink>

<P>{{$route.params.pageFrom}}</P>

const routes=[
    {
        path:"/about",
        name:"about",
        redirect:"/about/1", //重定向默认页面，写全路径
        component:()=> import("../views/Aboutview.vue"),
        // 添加子路由
        children:[
            {
                path:"1", 
                component:()=>import("../views/aboutsub/about1.vue")
            },
            {
                path:"2",
                component:()=>import("../views/aboutsub/about2.vue")
            }
        ]
    }
]

<template>
    <RouterView></RouterView>
    <RouterLink to="/about/1">关于1</RouterLink>
    <RouterLink to="/about/2">关于2</RouterLink>
</template>