首页 Vue

# 路由

路由就是对应关系

  • SPA 与前端路由 : SPA 指的是一个 web 网站只有唯一的一个 HTML 页面，所有组件的展示与切换都在这唯一的页面内完成，此时，不同组件之间的切换需要通过前端路由来实现

  • 前端路由 : Hash 地址与组件之间的对应关系

# 前端路由的工作方式

  1. 用户点击了页面上的路由链接
  2. 导致了 URL 地址栏中的 Hash 值发生了变化
  3. 前端路由监听到了 Hash 地址的变化
  4. 前端路由把当前 Hash 地址对应的组件渲染到浏览器中

image-20220730164358755

# vue-router 的基本使用

  1. 安装 vue-router 包

    1
    npm i vue-router@xxx -S

  2. 创建路由模块

    在 src 源代码目录下，创建 router/index.js 路由模块，并初始化如下的代码 :

    1
    2
    3
    4
    5
    6
    7
    8
    import Vue from 'vue'
    import VueRouter from 'vue-router'

    Vue.use(VueRouter)

    const router = new VueRouter()

    export default router

  3. 导入并挂载路由模块

    1
    2
    3
    4
    5
    6
    7
    import router from "@/router"

    new Vue({
      render: h => h(App2),
      router
    }).$mount('#app')

  4. 声明路由链接和占位符

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    //当安装和配置了vue-router后, 就可以使用router-link来代替普通的a连接了
    <router-link to="/home">首页</router-link>
    <router-link to="/movie">电影</router-link>
    <router-link to="/about">关于</router-link>

    <hr />

    //只要在项目中安装和配置了vue-router, 就可以使用router-view这个组件了
    //它的作用很单纯: 占位符
    <router-view></router-view>

# 路由重定向

路由重定向指的是：用户在访问地址 A 的时候，强制用户跳转到地址 C, 从而展示特定的组件页面。通过路由规则的 redirect 属性，指定一个新的路由地址，可以很方便地设置路由的重定向

1
2
3
4
5
6
7
8
const router = new VueRouter({
    routes: [
        {path: '/', redirect: '/home'},
		{path: '/home', component: Home},
        {path: '/movie', component: Movie},
        {path: '/about', component: About}
    ]
})

# 嵌套路由

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
//about.vue
<router-link to="/about">tab1</router-link>
<router-link to="/about/tab2">tab2</router-link>

<hr>
<router-view></router-view>


//router/index.js
const router = new VueRouter({
    routes: [
        {path: '/', redirect: '/home'},
        {path: '/home', component: Home},
        {path: '/movie', component: Movie},
        {
            path: '/about',
            component: About,
            children: [
                //默认子路由 : 如果children数组中, 某个路由规则的path值为空字符串, 则这条路由规则, 叫做"默认子路由"
                {path: '', component: Tab1},
                {path: 'tab2', component: Tab2}
            ]
        }
    ]
})

# 动态路由匹配

动态路由指的是：把 Hash 地址中可变的部分定义为参数项，从而提高路由规则的复用性

在 vue-router 中使用英文的冒号 (:) 来定义路由的参数项.

1
2
3
4
//路由中的动态参数以 : 进行声明, 冒号后面的是动态参数的名称
{path: '/movie/:id', component: Movie}

//将以下3个路由规则, 合并成了一个, 提高了路由规则的复用性

# 路由规则 props 传参

1
2
//在router/index.js中开启props传参, 从而方便的拿到动态参数的值
{path: '/movie/:mid', component: Movie, props: true}

# query 和 fullpath

  • 在 hash 地址中，/ 后面的参数项，叫做 “路径参数”

    在路由 “参数对象” 中，需要使用 this.$route.params 来访问路径参数

  • 在 hash 地址中，? 后面的参数项，叫做 “查询参数”

    在路由 “参数对象” 中，需要使用 this.$route.query 来访问查询参数

  • 在 this.$route 中，path 只是路径部分，fullPath 是完整的地址

    /movie/2?name=zs&age=20 是 fullPath 的值

    /movie/2 是 path 的值

更新于 阅读次数 次