Vue Router —— 基础

安装方式(vue)

1、npm安装

npm install vue-router

** main.js **
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

2、CDN引入

在index.html中引入,vue-router文件。这样可以减小打包的文件体积,且无需安装。

** index.html **
<script src="<%= BASE_URL %>cdn/vue-router/3.0.1/vue-router.min.js" charset="utf-8"></script>

在vue.config.js中配置一下,打包时忽略vue-router(已经全局引用)

//忽略的打包文件
config.externals({
  'vue-router': 'VueRouter',
});

路由跳转方式

1、使用 <router-link></router-link>, 一般被称为声明式导航
要结合router-view标签使用,否则无法渲染。router-link标签会被渲染成一个a标签。

** App.vue **
<template>
  <div id="app">
    <router-view />   // a标签被渲染在这里
  </div>
</template>

** index.vue **
<router-link to="/home"></router-link>  // to后面添加另外组件的路由地址

2、使用this.$router.push()跳转, 一般被称为编程式导航

** 通过this.$router访问路由器,通过this.$router.push()向浏览器的历史中添加一条记录来进行跳转。
其方式和history.pushstate()一致 **

该方法的参数可以是一个字符串路径,或者一个描述地址的对象。例如:
this.$router.push('home')	// 字符串 
this.$router.push({path:'home'})	//对象
this.$router.push({name:'user'}, params:{userId:123})	//命名路由  /user/123
this.$router.push({ path: 'register', query: { page: 1 }})	//带查询参数 /register?page=1

**this.$router.push()方法中带有path的时候,parasm就会被忽略 **
const userId = '123'
// 下述两种方法的效果一致
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123

// 这里的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user

重定向和别名

1、重定向redirect
例如本来要跳转到a界面,但是没有跳转到a界面,而跳转到了b界面。(重定向到了b)

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: '/b' }
  ]
})

** 
tip: 
redirect可以是一个路径,也可以是个对象,甚至是一个方法
redirect: {name:'b'}
redirect: to => {
	reutrun '/b'
}
**

**需要注意的是:导航守卫并不会作用于a路由上, 而是作用于重定向的路由, 即 b路由** 

2、别名alias
例如/a的别名是/b,但我们访问/b的时候,虽然url显示的是/b, 但是实际我们匹配到是/a的内容,就像是访问/a一样

const router = new VueRouter({
  routes: [
    { path: '/a', component: A, alias: '/b' }
  ]
})
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值