vue路由

最新推荐文章于 2023-03-03 19:01:47 发布
最新推荐文章于 2023-03-03 19:01:47 发布
阅读量758 收藏
点赞数
分类专栏： 前端 文章标签： vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Da_ci_hua/article/details/121716015
版权

vue-router

认识路由

路由就是通过互联的网络把信息从源地址传输到目的地址的活动。

后端渲染

通过jsp 直接在服务器解析，服务器渲染好HTML页面，通过url直接返回对应的页面。

后端路由

后端处理URL和页面的之间的映射关系。
在这里插入图片描述

前后端分离（前端渲染）

后端只负责提供数据，不负责任何阶段的内容。
在这里插入图片描述
在这里插入图片描述

前端路由

SPA页面：单页面富应用。整个网页只有一个html网页。
在这里插入图片描述
在这里插入图片描述

URL的hash

URL的hash也就是锚点（#），本质上就是改变window.location的href属性。
我们可以直接通过赋值location.hash来改变herf，但是页面不刷新。
在这里插入图片描述
在这里插入图片描述
地址栏会这样显示。
这种方法相当于入栈。
在这里插入图片描述

相当于出栈，返回上一次的页面。后入先出。
另一种方法加锚点
在这里插入图片描述
地址栏会这样显示。
在这里插入图片描述
replaceState不能返回页面
go(-1)相当于back,返回上一层
forward()相当于forward(),前进一层
在这里插入图片描述

安装和使用vue-router

安装
如果在创建项目时，已经创建了，就不用安装了。

npm install vue-router --save

在模块化工程中使用他（因为他是一个插件，所以可以通过vue.use()来安装路由功能）
第一步：导入路由对象，并且调用vue.use(vueRouter)
第二步：创建路由实例，并且传入路由映射配置
第三步：在Vue实例中挂载创建的路由实例
在这里插入图片描述
index.js

//导入一下vue,因为要用
import Vue from 'vue'
//导入路由
import Router from 'vue-router'
//导入要插件页
import HelloWorld from '@/components/HelloWorld'
//第一步，通过vue.use(插件)安装插件
Vue.use(Router)
    //第二步，创建路由对象，并导出
export default new Router({
    //routes配置组件和路由之间的应用关系
    routes: [
        //在这里配置映射关系，也可以单独抽离出去写
        {
            path: '/',
            name: 'HelloWorld',
            component: HelloWorld
        }
    ]
})

main.js文件

import Vue from 'vue'
import App from './App'
//下面这个路径少了index.js，原因是他会自动选择index.js导入
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
    el: '#app',
    //增强语法相当于router:router，挂载路由实例
    router,
    render: h => h(App)
})

使用Vue-router的步骤

第一步：创建路由组件
第二步：配置路由映射：组件和路径映射关系
第三步：使用路由：通过

<router-link to="/Home"></router-link>
  <router-view></router-view>

创建组件

在这里插入图片描述
About.vue

<template>
    <div>
        <h2>我是关于</h2>
        <p>哈哈哈哈</p>
    </div>
</template>

<script>


export default ({
   name:"About"
})
</script>

<style scoped>

</style>

home.vue

<template>
    <div>
        <h2>我是首页</h2>
        <p>哈哈哈哈</p>
    </div>
</template>

<script>


export default ({
   name:"Home"
})
</script>

<style scoped>

</style>

index.js
导入组件，并且配置路由映射关系

//导入一下vue,因为要用
import Vue from 'vue'
//导入路由
import Router from 'vue-router'


//导入组件
import Home from '../components/Home.vue'
import About from '../components/About.vue'
//第一步，通过vue.use(插件)安装插件
Vue.use(Router)
    //创建路由对象
export default new Router({
    //routes配置组件和路由之间的应用关系
    routes: [
        //在这里配置映射关系，也可以单独抽离出去写,一个映射就是一个对象
        {
            path: '/Home',
            //name: 'HelloWorld',
            component: Home
        },
        {
            path: '/About',
            //name: 'HelloWorld',
            component: About
        }
    ]
})

main.js文件中要注册路由组件

import Vue from 'vue'
import App from './App'
//下面这个路径少了index.js，原因是他会自动选择index.js导入
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
    el: '#app',
    //增强语法相当于router:router
    router,
    render: h => h(App)
})

App.vue中使用组件

<template>
  <div id="app">
    <router-link to="/Home">首页</router-link>
     <router-link to="/About">关于</router-link>
     <router-view></router-view>
    
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>

</style>

在这里插入图片描述
我是首页
哈哈哈
这是<router-view></router-view>的作用，点击会切换。
在这里插入图片描述

路由的默认配置

默认情况下，进入首页，我们希望<router-view>渲染首页内容。但是我们默认没有显示首页组件，必须用户点击才可以。
解决这种问题，只需多配置一个映射即可。

{
            path: '/',
            //redirect是重定向的意思，将根目录定向到/Home路径下，
            //这就会有直接显示<router-view>的效果了
            redirect: '/Home'
        },

在这里插入图片描述
路由默认跳转方式为hash方式，非常难看。
修改方式：
在index.js文件中加入mode:'history'
在这里插入图片描述

router-link属性的补充

<router-link to='/home' tag='li'>
1.tag: tag可以指定<router-link>之后渲染成什么组件, 比如上面的代码会被渲染成一个<li>元素, 而不是<a>，也可以渲染成一个button标签。
2.replace: replace不会留下history记录, 所以指定replace的情况下, 后退键返回不能返回到上一个页面中
3.active-class: 当<router-link>对应的路由匹配成功时, 会自动给当前元素设置一个router-link-active
的class, 设置active-class可以修改默认的名称.

在这里插入图片描述
这里默认生成了一个router-link-active类选择器，可以给他加属性，比如字体设为红色，这就是原生js中的排他思想。
这个类名有点长。可以在传入mode的时候一起传入一个linkActiveClass:‘active’，此时就会生成一个类名为active的选择器。

修改路由跳转

连点会报错，
在这里插入图片描述

vue-router 动态路由的使用

在页面的path路径可能是不确定的，比如我们进入用户界面，比如我们希望的路径
User/aaa或User/bbb,除了前面的user外，我们后面还跟上了ID.
注意这里动态绑定了一个数据

{
            path: '/User/:UserId',
            //name: 'HelloWorld',
            component: User
        }

这句话动态拼接，给to绑定来一个V-bind

<template>
  <div id="app">
     <router-link to="/Home" tag="button">首页</router-link> 
     <router-link to="/About" tag="button">关于</router-link> 
     <router-link :to="'/User/'+UserId" tag="button">用户页</router-link>
     
     <router-view></router-view>
    
  </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      UserId:"lisi"
    }
  },

组件User.vue的代码

<template>
  <div>
      <h2>我是用户页</h2>
      <p>我是用户的相关信息，嘿嘿嘿</p>
      <h2>{{UserId}}</h2>
      
  </div>
</template>

<script>
export default {
    name:'User',
    computed: {
        UserId(){
            //params为参数的意思,router与route 不一样
            //router 是路由器，是配置一些路由的
            //route 是活跃的路由，当前谁活跃，拿选谁
            return this.$route.params.UserId
        }
    }

}
</script>

<style>

</style>

路由的懒加载

在这里插入图片描述

//导入组件
//懒加载方式
const Home = () =>
    import ('../components/Home.vue')
const About = () =>
    import ('../components/About.vue')
const User = () =>
    import ('../components/User.vue')

在这里插入图片描述

嵌套路由

比如在home页面中，我们希望通过/home/news和/home/message访问一些内容。一个路由映射一个组件，访问这两个路径也会分别渲染两个组件。
在这里插入图片描述
index.js文件中配置

{
            path: '/Home',
            //name: 'HelloWorld',
            component: Home,
            children: [{
                    path: '',
                    redirect: 'news'

                },
                {
                    path: 'news',
                    component: HomeNews
                },
                {
                    path: 'message',
                    component: HomeMessage
                }
            ]

        },

并导入所需的组件

const HomeNews = () =>
    import ('../components/HomeNews.vue')
const HomeMessage = () =>
    import ('../components/HomeMessage.vue')

整体为：

//导入一下vue,因为要用
import Vue from 'vue'
//导入路由
import Router from 'vue-router'


//导入组件
//懒加载方式
const Home = () =>
    import ('../components/Home.vue')
const About = () =>
    import ('../components/About.vue')
const User = () =>
    import ('../components/User.vue')
const HomeNews = () =>
    import ('../components/HomeNews.vue')
const HomeMessage = () =>
    import ('../components/HomeMessage.vue')
    //第一步，通过vue.use(插件)安装插件
Vue.use(Router)
    //创建路由对象
export default new Router({
    //routes配置组件和路由之间的应用关系
    routes: [
        //在这里配置映射关系，也可以单独抽离出去写,一个映射就是一个对象
        //比较特殊的路径配置到上面
        {
            path: '/',
            //redirect是重定向的意思，将根目录定向到/Home路径下，这就会有直接显示<router-view>的效果了
            redirect: '/Home'
        },

        {
            path: '/Home',
            //name: 'HelloWorld',
            component: Home,
            children: [{
                    path: '',
                    redirect: 'news'

                },
                {
                    path: 'news',
                    component: HomeNews
                },
                {
                    path: 'message',
                    component: HomeMessage
                }
            ]

        },
        {
            path: '/About',
            //name: 'HelloWorld',
            component: About
        },
        {
            path: '/User/:UserId',
            //name: 'HelloWorld',
            component: User
        }
    ],
    mode: 'history',
    linkActiveClass: 'active'
})

在Home.vue组件中

<template>
    <div>
        <h2>我是首页</h2>
        <p>哈哈哈哈</p>
        <router-link to="/Home/news">新闻</router-link>
        <router-link to="/Home/message">消息</router-link>
        <router-view></router-view>
    </div>
</template>



<script>


export default ({
   name:"Home"
})
</script>

<style scoped>

</style>

注意
路径的写法，与该代码所写的位置

 <router-link to="/Home/news">新闻</router-link>
        <router-link to="/Home/message">消息</router-link>
        <router-view></router-view>

效果如下图
在这里插入图片描述

vue-router参数传递

63
index.js步骤：

引入组件
const Profile = () =>
    import ('../components/Profile.vue')

配置路由映射关系，这是第一种配置方式，下面是第二种方式

{
            path: '/Profile',
            //name: 'HelloWorld',
            component: Profile
        }

在App.vue中这样配置

<router-link :to="{path:'/Profile',query:{name:'大灰狼',age:18,height:1.88}}">档案</router-link>

query内容为
在这里插入图片描述

注意
1.如果不使用v-bind的绑定的话，to不会认识对象。
2.不加**/**的话，会进行页面内容的叠加。
3.如果我们有大量的数据要传的话，用query,
这样拿到传递的参数

 <h2>{{$route.query.name}}</h2>

在这里插入图片描述

导航守卫

在这里插入图片描述
在这里插入图片描述

在路由映射配置增加name

{
            path: '/Profile',
            name: '档案',
            component: Profile,

        }

前置钩子，（前置守卫）
然后增加守卫，那到name

router.beforeEach((to, from, next) => {
    //从form跳到to
    document.title = to.name
   // document.title = to.matched[0].name
   上边这句话是拿到嵌套路由的标题
    next()
    //一定要有next()这个函数
})

注意
next()的用法非常多。
1.next(false):中断当前导航，如果url改变了，，那么url就会地址就会重置到from路由对应的地址。
2.next（’/’）:当前页面被中断，跳到一个不同的页面，比如next（'/login'）跳到登录页面。
3.next(error):跳到错误页
在这里插入图片描述
在这里插入图片描述

路由独享守卫

可以在路由配置上直接定义 beforeEnter守卫：
但是这个为何进入不会显示页面原本的内容

{
            path: '/About',
            name: '关于',
            component: About,
            beforeEnter: (to, from, next) => {
                console.log('我进来了！');
                //这里如果不加next(),就不会往下走，控制台打印数据了，但是界面不会显示内容。
                next()
            }

        },

打开这个路由的时候，直接打印我进来了。

组件内的守卫

可以在组件内直接定义以下路由导航守卫：
beforeRouteEnter
beforeRouteUpdate
beforeRouteLeave
在这里插入图片描述

keep-alive的使用

router-view是一个（view-router）组件，如果直接被包在keep-alive里面，所有路径匹配到的视图组件都会被缓存。
keep-alive是vue的内置组件，可以使被包含的组件保留状态，避免重新渲染。
keep-alive的两个重要属性
include:字符串或正则表达式，只有匹配的组件才会被渲染。
exclude:字符串或者正则表达式，任何匹配的组件都不会被渲染。

<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition> 相似
，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。
当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数
将会被对应执行。

\color{red}{注意：只有当组件在 <keep-alive> 内被切换，才会有activated 和 deactivated 
这两个钩子函数}

通过描述我们知道，它会缓存不活动的组件，而不是销毁。这样组件之间的切换就能保存上个组件的状态，
而不是切换之后又得重新操作。

作者：酸辣土豆丝g
链接：https://www.jianshu.com/p/0272c0fe9392
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

<keep-alive exclude="Profile,User"><router-view></router-view></keep-alive>

在这里插入图片描述
注意
如果我们想实现跳转到别的页面，回来还是显示消息界面，而不是显示新闻界面。这个需求我们应该怎么做？
在home.vue中添加下面这段生命周期函数
这段函数的意思是：离开时，自动记录活跃的路由路径，然后赋值给path。然后

activated () {
        this.$router.push(this.path).catch(err=>err)
    },
    beforeRouteLeave (to, from, next)  {
        console.log(this.$route.path);
        this.path=this.$route.path
        next()
    
    },
～东北大呲花 ～
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 修改当前路由参数并刷新界面
qq_42931285的博客
04-22 3349
vue 修改当前路由参数并刷新界面
vue-router路由配置
花开莫与流年错_的博客
02-13 3469
路由配置主要是用来确定网站访问路径对应哪个文件代码显示的，这里主要描述路由的配置、子路由、动态路由（运行中添加删除路由）
Vue路由切换的两种方式
qq_51133939的博客
08-11 6735
vue路由切换的两种方式：1. 标签切换；2. js切换
vue——路由
weixin_52984349的博客
11-28 1774
vue——路由
Vue中的路由
weixin_64770583的博客
07-25 3万+
路由
Vue路由demo
08-03
Vue路由（Vue Router）是官方提供的强大路由管理器，它允许我们实现单页面应用（SPA）中的页面导航和状态管理。在Vue项目中，路由扮演着至关重要的角色，它帮助我们定义页面之间的跳转，并处理与这些跳转相关的数据...
vue 路由
01-08
Vue 路由是 Vue.js 应用程序中管理页面导航和状态的关键组成部分。它允许在不进行服务器请求的情况下切换视图，这对于单页应用程序（SPA）尤其重要。Vue Router 是 Vue.js 官方的路由库，它为 Vue.js 应用提供了前端...
vue路由分文件拆分管理详解
01-19
这里说的路由拆分指的是将路由的文件，按照模块拆分，这样方便路由的管理，更主要的是方便多人开发。具体要不要拆分，那就要视你的项目情况来定了，如果项目较小的话，也就一二十个路由，那么是拆分是非常没必要的。...
vue路由切换时取消之前的所有请求操作
10-14
本文将详细讲解如何在Vue路由切换时取消之前的所有请求操作。 首先，我们需要了解Vue的`beforeEach`钩子函数，它是在每次路由切换前都会执行的全局守卫。我们可以在`main.js`文件中注册这个钩子，以确保在进入新的...
vue路由文件
04-25
Vue Router是Vue.js官方支持的路由管理器，用于处理单页面应用（SPA）的导航和页面间通信。在Vue项目中，路由扮演着至关重要的角色，它允许我们根据URL来动态加载和切换不同的组件，实现页面间的平滑过渡。 Vue ...
vue-router 路由超详细教程
热门推荐
weixin_47124112的博客
09-06 3万+
路由（英文： router）就是对应关系Hash 地址与组件之间的对应关系。vue-router是 vue.js 官方给出的路由解决方案。它只能结合 vue 项目进行使用，能够轻松的管理 SPA 项目中组件的切换。vue-router 的官方文档地址：https://router.vuejs.org/zh/2. vue-router 安装和配置的步骤① 安装 vue-router 包② 创建路由模块③ 导入并挂载路由模块④ 声明路由链接和占位符2.1在项目中安装 vue-router。
VUE-路由详解
damadashen的博客
05-14 2583
介绍VUE路由及使用，简单介绍动态路由、嵌套路由、编程式的路由及命名路由的使用
Vue路由（vue-router）详细讲解指南
whicce的博客
11-28 2430
Vue路由（vue-router）详细讲解指南动态路由匹配：嵌套路由：路由导航两种方式： 转自：有梦想的咸鱼前端 Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。路由实际上就是可以理解为指向，就是我在页面上点击一个按钮需要跳转到对应的页面，这就是路由跳转； 首先我们来学习三个单词（route，routes，router）：...
Vue学习：Vue中的路由详解（完整版）
qq_49916504的博客
06-19 1万+
vue中的路由知识详解完整版
Vue的路由
thwr1881的博客
08-30 1309
Vue的路由
手摸手，带你用vue撸后台 系列二(登录权限篇)
很多时候犯错都是在不知情的情况下发生的
10-04 1212
完整项目地址：vue-element-admin 系列文章： 手摸手，带你用 vue 撸后台 系列一（基础篇） 手摸手，带你用 vue 撸后台 系列二(登录权限篇) 手摸手，带你用 vue 撸后台 系列三 (实战篇) 手摸手，带你用 vue 撸后台 系列四(vueAdmin 一个极简的后台基础模板) 手摸手，带你用 vue 撸后台 系列五(v4.0 新版本) 手摸手，带你封装一个 vue component 手摸手，带你优雅的使用 icon 手摸手，带你用合理的姿势使用 webpack4（
vue路由篇
最新发布
weixin_68658847的博客
03-03 1343
vue路由篇
vue-router 如何在当前路由下重新点击当前路由的router-link实现刷新
diaobenlei7435的博客
05-19 495
代码： <router-link to="/home" @click.native="flushCom">首页</router-link> export default { 　　... 　　... 　　methods:{　　　　flushCom:function(){ 　　　　　　//router是路由实例,例如:var router = new ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值