Vue路由Vue Router创建、传递参数、路由守卫

最新推荐文章于 2024-06-03 19:09:41 发布
最新推荐文章于 2024-06-03 19:09:41 发布
阅读量2.4k 收藏 11
点赞数 3
分类专栏： vue 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a18792627168/article/details/105246114
版权

本文略长，包含如下内容，具体可通过目录进行查看

目录

1.安装vue-router

2.路由配置

异步组件

3.搜索模式

4.路由使用

导航

5.路由传参

1.路由传递参数   方式1

2.路由传递参数   方式2

3.路由传递参数   方式3

4.查询参  方式4

5.props

6.路由嵌套

7.过渡属性

8.具名视图

9.路由重定向

10.编程式导航 

11.路由守卫

全局路由守卫

路由级守卫

组件级路由

 

Vue Reonut'wer是Vue.js官方的路由管理器。它和Vue.js的核心深度继承，让构建单页面应用的应用有：

  1. 嵌套的路由/视图表
  2. 模块化的、基于组件的路由配置
  3. 路由参数
  4. 基于Vue.js过渡系统的视图过渡效果
  5. 细粒度的导航控制
  6. 带自动激活的CSS class链接
  7. HTML5历史模式或hash模式

1.安装vue-router

如果没有项目需要先新建项目：vue create vue-routerdemo

若有项目，在已有项目的基础上，使用路由前先需要安装vue-router：

        命令为：npm install vue-router --save

2.路由配置

在项目的src目录下创建router.js文件，或者将路由直接添加进App.vue。

本文采用配置router.js文件。

在新建router.js文件后，需要将其导入入口文件 main.js 内。

main.js文件：

import Vue from 'vue'
import App from './App.vue'
import router from './router.js';

Vue.config.productionTip = false

new Vue({
  // router 路由必须加在挂载点上
  router,
  render: h => h(App),
}).$mount('#app')

可以看到，在导入后并在vue实例内使用。在vue实例内使用时只能使用router，否则会报错。若报错时参考这篇博客解决。

router.js文件，与main.js同级：

import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/views/Home.vue';
import About from '@/views/About.vue';
import Carousel from '@/views/Carousel.vue';


// 插件挂载
Vue.use(Router)

export default new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('./views/About.vue')
    },{
      path: '/carousel',
      name: 'carousel',
      component: Carousel
    }
  ]
})

可以看到：在使用路由前需要导入vue-router并使用use进行挂载。

Vue.use(Router)

导入完成后，需要创建Router实例，具名或匿名导出。下方是匿名导出路由，导入其他页面组件，进行路由配置。路由内component是配置页面其他子组件的内容。 

异步组件

路由懒加载

{
    path: '/about',
    component: () => import('@/views/About.vue') 
}

上述代码起到了懒加载的作用，当不访问此组件时，不会下载这个组件。

同时，需要引入新界面或新路由时需要导入文件，需要在router.js内导入并同步添加routers内的路由信息。

3.搜索模式

哈希模式

使用@/views/About.vue 内的@是哈希模式，http://localhost:8080/#/about 可以动态监听路由内的组件变化。

history模式（更好）

在router.js内Router实例内添加：

mode: 'history',

使用的是HTML5的history API，http://localhost:8080/about搜索引擎友好，可读性强，便于维护，页面不会刷新。

有一个问题就是部署时，需要将根页面的全部后缀路由指向根路由，否则会出问题。

配置路由的部分部分完成。

4.路由使用

使用路由的文件为App.vue文件，其添加导航的位置在<div id="app"></div>下，可使用router-link实现路由导航。router-view 为路由的出口或插座，所有内容的载体是也是路由切换的地点和占位符。需要注意的是，使用vue-router控制路由则必须由router-view作为展示容器。

<dvi id="app"></div>
    <div id="nav">
        <router-link to="/">Home</router-link> |
        <router-link to="/about">About</router-link> |
        <router-link to="/carousel">Carousel</router-link>
    </div>
    <router-view/>
</div>

引入需要路由的组件，添加路由操作完成。

在添加好进行切换后，实际上执行的是dom操作。

导航

导航的话，router-link不能放在router-view内，否则容易乱。

在router-link这里添加时，可以选用多种方式。

<!-- 路径方式 -->
<!-- 静态导航 -->
<router-link to="/">Home</router-link>

<!-- 命名路由的方法，此方法必须给路由命名 -->
<router-link :to="{ path: 'about' }">About</router-link>
或者
<router-link v-bind:to="{ path: 'about' }">About</router-link>

<router-link :to="about">About</router-link>

<!-- 命名的路由 -->
<router-link :to="{ path: 'user', params: { userId: 123 }}">User</router-link>

<!-- 带查询参数，下面的结果为 /register?plan=private -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>

在组件内添加  tag 标签，可以指定导航展示的标签：

<router-link :to="apple" tag="li"></rpouter-link>

最终这个导航菜单展示的为li标签。

5.路由传参

1.路由传递参数   方式1

路由可以携带一些参数，使用this.$route获取

{
	path: '/home/:msg',
	component: Home
}

这里的msg为传递的参数。

在导航上需要添加需要传递传递的参数，这里是将vuejs字符串作为参数传递出去：

<router-link to="/home/vuejs">home</router-link>

获取参数

这个传递的参数，是传递给了home，在Home.vue组件内获取，也就是你传递的这个组件内的获取，通过下方代码获取：

<p>{{ $route.params.msg }}</p>

也可以通过在生命周期函数内获取等等或其他位置，主要是通过下方代码获取（需要添加this）：

this.$route.params.msg

展示分别为页面和在函数内打印获取的参数：

2.路由传递参数   方式2

直接通过添加，跳转到home页，传递的参数为vuejs111(以示区分)：

this.$router.push('/home/vuejs111')

测试结果如下：

方式2传递的参数可以更多而且更方便。如果参数过多，方式1的修改比较麻烦，不灵活。

3.路由传递参数   方式3

如果参数很多时，我们可以通过给  this.$router.push 再添加一个参数params(对象)：

this.$router.push({name: 'home',params:{id:1, msg: 'vuejs111'}})

使用path会影响路径，所哟我们需要使用路由名称name。

同时需要在router.js的文件上添加name：

{
	path: '/home/:msg',
	name: 'home',
	component: Home
}

这样算配置完成，最后的结果为（获取的方式不变，在上面）：

4.查询参  方式4

传递查询参：

<router-link to="/home/vuejs?foo=bar">home</router-link>

 获取查询参的方式（query.foo）：

this.$route.query.foo

 

路由可读性强，而且是必传参时，使用参数传递，而非查询参。

5.props

props传静态值

先在router.js上加测试路由，通过'/static'访问page1：

{
	// 给组件传静态值
	path: '/static',
	component: Page1,
	props: {
		foo: 'bar'
	}
},

然后在Page1.vue上添加：

props:{
	foo: {
		type: String,
		default: ''
	}
},

之前在Page1.vue上获取：

<h3>foo:{{ foo }}</h3>

访问http://localhost:8080/static可以看到最后的结果为： foo: bar。

props传动态值

{
	// 将route.params内的参数作为属性传进去
	path: '/page1/:foo',
	component: Page1,
	props: true
},
<router-link to="/page1/bar">page1</router-link>

与上述效果相同

props传递函数

在router.js内修改路由函数：

{
	path: '/home/:id/:msg',
	name: 'home',
	component: Home,
	props: func
}

在router.js内添加函数：

function func({params, query}){
    return {
        id: params.id,
        msg: params.msg,
        foo: query.foo
    }
}

导航App.vue：

<router-link to="/home/1/vuejs?foo=bar">home</router-link>

然后是Home.vue的代码：

<template>
    <div>
        <h3>home</h3>
        <!-- 获取路由路径的参数 -->
        <p>id:{{ $route.params.id }}</p>
        <p>msg:{{ $route.params.msg }}</p>
        <p>foo:{{ $route.query.foo }}</p>
        
        <!-- 通过属性获取 -->
        <p>id:{{ id }}</p>
        <p>msg:{{ msg }}</p>
        <p>foo:{{ foo }}</p>
    </div>
</template>

<script>
    export default {
        props: ['id','msg','foo'],
        created(){
            console.log(this.$route.params.msg);
            // 查询参
            console.log(this.$route.query.foo);
        }
    }
</script>

<style lang="sass" scoped>

</style>

传参完成，大体整理到这么多，可能还有。。。

6.路由嵌套

路由内子路由的添加：

{
      path: '/about',
      name: 'about',
      component: About,
      // 这个添加的是子路由，可/red进行查看页面内的东西
      children:[
         {
           path:' red',
           component: RedApple
         }
       ]
    }

父组件必须有有一个路由的出口：

 

7.过渡属性

有过渡属性时，需要进行加载，可以添加transition标签进行切换，及keep-alive标签进行缓存，避免在每次加载的时候都需要重新加载视图。

<transition name=”fade”>
  <keep-alive>
     <router-view></router-view>
  </keep-alive>
</transition>

8.具名视图

视图 router-view也可以添加名称,在componnets内根据不同视图展示不同的组件。

<router-view name="comA"/>
<router-view name="comB"/>

9.路由重定向

使用redirect将指定 主页的内容 “/” 重定向到“/home” ，最后我们看到是需要是'http://localhost:8080/'最后还是会导航到'http://localhost:8080/home'。

   {
      // 路由的重定向
      path:'/',
      redirect: '/home'
    },

10.编程式导航 

传递参数并下一个页面接收参数

通过js添加导航，与router-link实现效果一致：

这里 /apple 为需要跳转的路径，params为跳转需要传递的参数，页可以不添加

// 字符串
router.push('home')

// 对象
router.push({ path: 'home' })

// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})

// 带查询参数，变成 /home?id=1111
this.$router.push({path:'/home',query:{id:"1111"}})


const userId = '123'
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123


// 这里的 params 不生效   （命名的路由才能通过params获取参数）
router.push({ path: '/user', params: { userId }}) // -> /user

新页面接收路由传递过来的参数   this.$route.query.id  ：

<div>{{ this.$route.query.id }}</div>

 通过此获取路由传递过来的参数。

11.路由守卫

分别为三种路由守卫：

router.beforeEach((to, from, next) => {})

beforeEnter(to, from, next){}

beforeRouteEnter(to, from, next){}

beforeRouteUpdate(to, from, next){}

 

内部的参数：

  • to将要访问的路径
  • from 代表从哪个路径跳转而来
  • next 表示一个函数，表示放行   next() 放行    next('/login) 强制跳转

全局路由守卫

所有的界面都需要通过这个守卫：

router.js的修改部分：

export default new Router({
    ...
})
//需要将上部分改为下面的格式，里面内容不变

const router = new Router({
    ...
})

然后拿到router，在这里添加路由守卫，并导出：

//全局路由守卫
router.beforeEach((to, from, next) => {
    console.log("to=",to);
    if(to.path !== '/login'){  //要求登录
        if(window.isLogin){
            next()
        }else{
            next('/login?redirect='+to.path)
        }
    }else{
        next();   //直接进
    }
})
export default router;

在设置好之后，需要在Login.vue页面添加路由守卫的信息，设置一个简单的登录查看效果：

<template>
    <div>
        <h1>Login</h1>
        <button @click="login">login</button>
    </div>
</template>

<script>
    export default {
        methods: {
            login() {
                // 登录成功
                window.isLogin = true;
                const {redirect} = this.$route.query;
                if(redirect){   // 有回跳地址就去哪
                    this.$router.push(redirect)
                }else{   // 没有去首页
                    this.$router.push('/')
                }
            }
        },
    }
</script>

<style lang="sass" scoped>

</style>

路由级守卫

也称为路由级闸口，是添加在路由内实现的局部守卫。

router.js文件内：

beforeEnter(to, from, next){
	if(window.isLogin){
		next()
	}else{
		next('/login?redirect='+to.path)
	}
},

添加在routers级别的，位置如下图：

在添加完成后，一定要注释掉全局路由里面的内容，然后添加 next();，才能继续进行，否则会报错。

组件级路由

beforeRouteEnter()

是添加在组件内的路由，使用如下：

beforeRouteEnter(to,from, next){
	if(window.isLogin){
		next()
	}else{
		next('/login?redirect='+to.path)
	}
}

因为这个beforeRouterEnter()的的范围非常小，所以这个很少用。

beforeRouteUpdate()

当路由参数发生变化时触发：如/page1/vue  和 /page2/recact  的参数变化，它可以根据to拿到参数

beforeRouteUpdate(to, from, next){
	next();
}

这些钩子函数内都必须添加next()，否则进行不下去。

watch()内通过$route(){}也可以拿到路由传递过来的参数。

DOM曼珠沙华
关注
  • 3
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-router(路由原理？路由守卫？传参)
weixin_64608867的博客
04-26 439
路由原理 路由就是用来解析URL以及调用对应的控制器，并返回从视图对象中提取好的网页代码给web服务器,最终返回给客户端。 路由传参： 三种： 分别是query，params（拍若门次），动态路由传参 路由守卫： 2.路由守卫使用的方式有几种？ 全局的 单个路由独享的 组件级的 3.vue-router全局有三个守卫： router.beforeEach 全局前置守卫 进入路由之前 router.beforeResolve （比否瑞绕）全局解析守卫(2.5.0+) ...
Vue路由守卫之路由独享守卫
10-16
Vue Router 提供了多种类型的路由守卫，包括全局前置守卫、组件内守卫和路由独享守卫。在本例中，我们将重点讨论路由独享守卫 `beforeEnter`。 `beforeEnter` 是一个可以在路由配置中直接定义的守卫函数，用于在...
VUE2中如何添加路由守卫
m0_66051368的博客
03-05 784
在配置路由文件中设置拦截器： // vrouter 可以快速生成代码结构 import Vue from 'vue' // 路由模块 import VueRouter from 'vue-router' // use: 向Vue中注入 路由模块 Vue.use(VueRouter) // routes: 用于存储 路径 和 组件间的对应关系 const routes = [ // vroute-named { // 使用时: localhost:8080/news // 可以利
Vue Router 4.x 如何隐式给路由传参params
我的米饭
06-03 333
，如果path里不加:id，那么你代码里跳转时写的：router.push({ name: ‘user’, params: { username: ‘yourname’ } }) ，里面的params参数就会无效，到时你在 route.params 里也拿不到任何值。此方式在4.0版本后就不能隐式的传参了，比如想在路由里加入username参数，则必须先在路由配置里，给你当前的路径path里写入明确的动态参数 “然后在你需要添加参数的组件里，使用路由导航守卫 onBeforeRouteLeave。
vue路由导航守卫实现进入页面后一直携带多个参数
ZH
12-11 1361
此处携带三个参数 id. hallid. jobId. const router = new Router({ mode: 'hash', routes }) router.beforeEach((to, from, next) => { if (to.query.id && to.query.hallid && to.query.jobId) ...
vue Route参数传递和导航守卫
Sobered的博客
07-04 1091
路由的传递参数 对于params方式的传递参数，我们已经讲过。现在我们来使用第二种参数方式来进行练习： 新建Profile.vue组件 <template> <div> <h3>通过query来获取 参数 数据</h3> <h5> {{$route.query}} </h5> </div> </template> &lt
vue-router原理
零-J
05-22 6222
vue-router一、vue-router路由原理？二、两种路由模式1.hash模式：2.history模式路由跳转方式 一、vue-router路由原理？ 1.路由就是用来解析URL实现不同页面之间的跳转 vue-router通过hash与History interface两种方式实现前端路由，更新视图但不重新请求页面”是前端路由原理的核心之一，目前在浏览器环境中这一功能的实现主要有两种方式 const routes = [ { path: '/', redirect: '/rec
Vue 路由钩子（导航守卫）详解及应用场景
01-08
const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { // ... }) 当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于 ...
vue-router 实现导航守卫（路由卫士）的实例代码
12-04
导航守卫即是在路由跳转的时候，根据vue-router提供的导航守卫主要用来通过跳转或取消参数或查询的改变并不会出触发进入/离开的导航守卫 路由跳转前做一些验证，比如登录验证，是网站中的普遍需求。 对此，vue-route...
vue路由守卫及路由守卫无限循环问题详析
10-16
Vue 路由守卫是 Vue.js 框架中 Vue Router 为了提供更精细的控制，允许开发者在路由切换时执行预处理或后处理逻辑的功能。这些逻辑可以包括权限检查、数据预加载等，确保只有满足特定条件的用户才能访问特定的页面。...
vue-router 导航守卫
wushen的博客
04-20 865
在路由文件中设置进入路由前的守卫 name: 'hookRouter', component: hookRouter, beforeEnter:(to,from,next)=>{ console.log('准备进入路由守卫模板'); console.log(to); console.log(from); ...
路由传参和路由卫士
从人到猿
08-28 503
1.动态路由匹配 动态路由也可以叫做路由传参。 组件的显示内容经常会根据用户选择的内容不同来在同一个组件中渲染不同内容。那么在这个时候就需要动态路由。 1. 动态路径参数 使用动态路由匹配中的 动态路径参数来进行路由配置。 注意：动态路径参数 以冒号：开头 {name:"tema",path:"/index/:id/:name",component:tema}, 2. 绑定参数 路由导航绑...
路由之间传值及路由守卫
weixin_44268707的博客
04-01 1692
路由守卫 路由守卫分为以下几种： 全局守卫：beforeEach（是路由的钩子函数，在每一个路由跳转之前执行，常做登录权限判断，参数to，from，next） 后置守卫：afterEach（在跳转之后执行，参数to和from） 全局解析守卫：beforeResolve（参数to，from和next，在beforeEach之后，afterEach之前） 路由独享守卫：beforeEnter 组内路由...
vue 路由传参方式_vue-router 基础：几种路由守卫方式
weixin_39975529的博客
12-12 372
前言《vue 基础》系列是再次回炉 vue 记的笔记，除了官网那部分知识点外，还会加入自己的一些理解。(里面会有部分和官网相同的文案，有经验的同学择感兴趣的阅读)守卫这个思想，最初我是在 angular 看到的，然而 vue 里也有对应的概念，毕竟这些前端框架的设计理念有太多的相似之处。但在整个程序设计语言中，还是觉得用 java 里的拦截器 interceptor 描述最为恰当。下面来看下 vu...
39.Vue3：路由传递参数
m0_63953077的博客
10-09 964
Vue3：路由传递参数
【vue其他相关】路由相关方案：如何统一给所有路由加上参数、参数改变后如何触发组件切换
庞囧的博客
05-07 2884
文章目录问题场景beforeEach全局守卫底层函数劫持 问题场景 可能有些情况，我们需要路由从上游链带参数一直传下去，所以全局的路由需要动态自动添加固定参数。 beforeEach全局守卫 const query = { id: ‘1’ } //这是全局需携带的参数 router.beforeEach((to,from,next)=>{ to.query.id ? next() : next({…to.query, …query}) //这句条件判断有一层的用意是，如果第一次加了参数后，会再次触
Vue 路由使用 params 传递参数失败 获取不到
qq_33950912的博客
10-09 2665
解决 使用 params 传递参数 必须 加上 name {path:'/blog',name:'blog',params:{is:true}}
vue router params传参，路由守卫中无法获取
SimpleCow的博客
02-24 1105
场景： 我使用router的params进行传参，在路由守卫中获取参数进行判断 现象： 守卫中无法到获取参数 解决方案： 将“path”参数替换为router中对应的“name” 不使用“params”传参，改为使用“query”传参 原因： “params”参数需要由“name”参数引入，有且只有“name”字段时（“name”和“path”同时存在时不可以），“params”存入的值才可被获取。 “query”却可以在“name”和“path”两种情况下正常工作传值取值 ...
veu项目中的路由处理
qq_44704740的博客
05-16 192
router/index.js import Vue from 'vue' import Router from 'vue-router' import store from '@/store' import routes from '../router.config.js' Vue.use(Router) const createRoute = (routes) => { // 数组的reduce方法，累加得出路由信息 return routes.reduce((processedRout
vue router路由守卫
最新发布
06-10
路由守卫主要分为以下几种类型： 1. **全局守卫** (Global Guards)： - **beforeEach**: 在每次导航尝试之前被调用，可以阻止导航、改变目标URL或者提供一些默认参数。 - ** afterEach**: 在每次导航完成后被调用...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值