vue（七）路由 vue-router

安装和使用

通过vue-router路由管理页面之间的关系，是Vue.js的官方路由

1、安装路由 npm install --save vue-router

2、配置路由文件 route/index.js

// 导入路由库
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;

         创建路由有两种方式 createWebHashHistory() 和 createWebHistory()。区别如下：

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

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

3、引入路由到项目，在main.js中添加配置

import router from './route'

const app= createApp(App)
app.use(router)  // 整个应用支持路由。

4、指定路由显示入口和路由跳转

router-link

请注意，我们没有使用常规的 a 标签，而是使用一个自定义组件 router-link 来创建链接。这使得 Vue Router 可以在不重新加载页面的情况下更改 URL，处理 URL 的生成以及编码。

router-view

router-view 将显示与 url 对应的组件。你可以把它放在任何地方，以适应你的布局。

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

动态路由

1、在路由配置中指定参数的key

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

2、在跳转过程中携带参数

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

3、读取参数，动态路由的参数都映射到 $route.params 上的相应字段

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

嵌套路由配置

1、在路由配置中添加子路由配置

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")
            }
        ]
    }
]

2、在主页面中添加路由跳转

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

 

Sensitive 与 strict 路由配置​

默认情况下，所有路由是不区分大小写的，并且能匹配带有或不带有尾部斜线的路由。例如，路由 /users 将匹配 /users、/users/、甚至 /Users/。这种行为可以通过 strict 和 sensitive 选项来修改，它们可以既可以应用在整个全局路由上，又可以应用于当前路由上

导航到不同的位置、

注意：在 Vue 实例中，你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push。

想要导航到不同的 URL，可以使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，会回到之前的 URL。

当你点击 <router-link> 时，内部会调用这个方法，所以点击 <router-link :to="..."> 相当于调用 router.push(...) ：

声明式	编程式
<router-link :to="...">	router.push(...)

命名视图

有时候想同时 (同级) 展示多个视图，而不是嵌套展示，例如创建一个布局，有 sidebar (侧导航) 和 main (主内容) 两个视图，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果 router-view 没有设置名字，那么默认为 default。

<router-view class="view left-sidebar" name="LeftSidebar"></router-view>
<router-view class="view main-content"></router-view>
<router-view class="view right-sidebar" name="RightSidebar"></router-view>

一个视图使用一个组件渲染，因此对于同个路由，多个视图就需要多个组件。确保正确使用 components 配置 (带上 s)：

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: '/',
      components: {
        default: Home,
        // LeftSidebar: LeftSidebar 的缩写
        LeftSidebar,
        // 它们与 `<router-view>` 上的 `name` 属性匹配
        RightSidebar,
      },
    },
  ],
})