Vue路由

VueRouter是vue官方路由，与vue.js核心深度集成，让vue.js构建单页应用变得轻而易举

使用

安装：

npm install --save vue-router

定义路由文件：

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

import aView from "../views/a-view.vue"
import bView from "../views/b-view.vue"

//配置信息中需要页面的相关配置
const routes = [
    {
        path:"/",//路径
        component:aView//跳转页面
    },{
        path:"/haha",
        component:bView
    }
]


const router = createRouter({
        //createWebHashHistory:访问路径有# 。原理a标签的描点链接
    //createWebHistory:访问路径没有#,此种方式需要后台配合做重定向，否则会404。原理h5的pushState()
    history:createWebHashHistory(),
    routes
})
export default router

启动路由：

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

//使用use明确路由
createApp(App).use(router).mount('#app')

展示路由页面

<template>
  <!-- 路由显示路口 -->
   <nav>
    <RouterLink to="/">首页</RouterLink>
    <RouterLink to="/haha">关于</RouterLink>
   </nav>
   
  <RouterView />
</template>

传递参数

配置路由，并设置key：

const routes = [{
        path:"/xixi",
        //异步加载方式
        component:()=> import("../views/c-view.vue")
    },{
        path:"/hehe/:name",//通过/:设置key
        component:()=> import("../views/d-view.vue")
    }
]

to页面：

<template>

    <ul>
        <li><RouterLink to="/hehe/百度">百度新闻</RouterLink></li>
        <li><RouterLink to="/hehe/网易">网易新闻</RouterLink></li>
        <li><RouterLink to="/hehe/头条">头条新闻</RouterLink></li>
    </ul>
</template>

from页面：

<template>
    <h3>新闻详情</h3>
    <p>{{ $route.params.name }}</p>
</template>

嵌套路由

配置二级路由：

const routes = [{
        path:"/user",
        component:()=> import("../views/e-view.vue"),
        children:[
            {
                //二级导航的路径不要加/
                path:"info",
                component:()=> import("../views/f-view.vue")
            }
        ]
    }
]

在一级vue中添加：

<template>
    <h3>用户列表</h3>
    <RouterLink to="/user/info">用户详情</RouterLink>
    <RouterView />
</template>

如果需要设置一级路由的默认二级展示，可以使用redirect:完整二级路径的方式设置