VUE路由

最新推荐文章于 2024-07-25 17:51:45 发布

DIM 云龙

最新推荐文章于 2024-07-25 17:51:45 发布

阅读量72

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_40637984/article/details/129249172

版权

在进行模块化导入的时候，如果给定的是文件夹，那么默认导入的是这个文件夹下叫做index.js的文件

前端的路由：

Hash地址与组件之间的对应关系

location.hash 显示的是页面的hash地址，不同的页面有不同的hash

工作方式：

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

手动模拟简单前端路由：

hashchange：监听页面hash地址受否发生改变

<keep-alive include="wz,homrdim">

</keep-alive>

</div>

----------------

created () {

//监听窗口的hashchange事件监听窗口的hash变化

window.onhashchange = () => {

// 将指定hash值按照修改显示组件

switch (location.hash) {

case '#/wz':

this.datad = 'wz'

break

case '#/homrdim':

this.datad = 'homrdim'

break

}

vue-router：

安装和配置步骤

创建路由模块

导入并挂载路由模块

声明路由链接和占位符

安装和配置步骤：

安装 vue-router 包

npm install --legacy-peer-deps vue-router@3.5.2

在路由模块中声明路由的对应关系：

<hr>

<router-view></router-view>

</div>

</template>

只要在项目中安装了 vue-router 就可以使用 <router-view></router-view> 组件，它的作用很单纯：占位符

import Vue from 'vue'

import VueRouter from 'vue-router'

import HomeView from '../views/HomeView.vue'

import about from '../components/about_Vue.vue'

// 注册插件

Vue.use(VueRouter)

// 创建路由的实例对象

const router = new VueRouter({

// router是一个数组，作用：定义hash地址，与组件之间的对应关系

routes: [

// #不需要写

// path: hash地址，component: 对应的组件

{ path: '/home', component: HomeView },

{ path: '/about', component: about }

]

})

export default router

rourer-link：

在安装配置了 router 后就可以使用 router-link 代替 a链接

将a链接修改为router-link href修改为to 不要写#直接写 /XXX

<router-link to="/about">关于</router-link>

路由重定向：

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

// 路由重定向，在用户访问 / 的时候通过使用 redirect 转跳到 /about 对应的组件中

{ path: '/', redirect: '/about' },

嵌套路由：

在路由模块中，导入需要组件，并使用 children 属性声明子路由

{

path: '/about',

component: about,

// 重定向子路由

redirect: '/about/cddim'

// 声明子路

children: [

{ path: 'cddim', component: tab1 },

{ path: 'cd2', component: cd2 }

]

}

默认子路由：

如果 childern 数组中的某个路规则的 path 值为空字符串，则这条路由规则叫做默认子路由

children: [

// 默认子路由

{ path: '', component: tab1 },

{ path: 'cd2', component: cd2 },

{ path: 'cddim', component: tab1 }

]

动态路由匹配：

将hash地址中可变的部分定义为参数项，从而提高路由规则的复用性

动态组件传参1： {{ $route.params.id }}

动态组件传参2： { path: ‘/move/:id’, component: move, props: true } 开启props

<router-link to="/move/1">海绵宝宝</router-link>

<router-link to="/move/2">蜡笔小心</router-link>

<router-link to="/move/3">蔡徐坤</router-link>

- - - - - - - - - - - -

// :id 为动态参数

{ path: '/move/:id', component: move }

拓展：

this.$route 是路由的参数对象

在 hash 地址中， / 后面的参数项，叫做路径参数，在路由对象中需要使用 $route.params 来访参数

在 hash 地址中，？后面的参数叫做查询参数，在路由对象中需要使用 $route.query 来获取到参数

使用 $route.path只能获取地址的部分/后面的，例如：/m/s

使用$route.fullPath可以获取到完整的哈希地址，例如：/m/s?a=100&r=10

vue-router 中的编程式导航API：

this.$router.push(‘ hash 地址 ‘)：跳转到指定hash地址，并增加一条历史记录

this.$router.replace(‘ hash 地址 ‘)：转跳到指定hash地址，并替换掉当前历史

this.$router.go(数值 n)：后退到之前的组件

在实际开发中，一般只会前进后退一层页面，因此vue-router提供了

$router.back() 在历史记录中回退到上一个页面

$router.forward() 在历史记录中前进到下一个页面

<template>

<div class="boxx">

<h1>我是TAB1</h1>

<button @click='din'>点击跳转</button>

<!-- <button @click=''>点击跳转</button> -->

</div>

</template>

<script>

export default {

methods: {

din () {

// 跳转到指定hash地址页面，并且增加一条历史记录

this.$router.push('/tab2')

// 转跳到指定hash地址页面，并且替掉当前的历史记录

this.$router.replace('/tab2')

// 后退到之前的组件

this.$router.go(-3)

}

}

}