vue路由基本使用

发表于 | 分类于 | 阅读次数:

普通跳转

不带参数跳转

1
<router-link to="/login" class="style">go to login page</router-link>

v-link指令已废弃。现在使用的<router-link>标签代替。

动态路由匹配

以下是声明式导航。

params

1
2
3
4
5
6
7
8
<router-link :to="{name: 'login' ,params:{username: username}}" class="style">(parmas) go to login page</router-link>

<!--路由配置-->
{
	path: '/login/:username',
    name: 'login',
    component: login
}

query

1
2
3
4
5
6
7
8
<router-link :to="{name: 'login' ,query:{username: username}}" class="style">(query) go to login page</router-link>

<!--路由配置-->
{
	path: '/login',
    name: 'login',
    component: login
},

编程式导航

除了使用<router-link>创建a标签来定义导航链接，我们还可以结束router的实例方法，通过编写代码来实现。

router.push(location,onComplete?,onAbort?)

在vue实例内部，可以通过$router访问路由实例，因此可以调用this.$router.push。想要导航到不同的url，则使用router.push方法。这个方法会向history栈添加一个新纪录。所以，当用户点击浏览器后退按钮时，则回到之前的url。

当点击<router-link>时，这个方法会在内部调用，所以说，点击<router-link :to="url">等同于调用router.push(url)。

声明式 编程式
<router-link :to="url"> router.push(url)

因此上面编程式导航的例子可以用另一种方式等价替换。

params

1
2
3
4
5
6
7
8
9
10
11
<button @click="loginPage()" class="style">go to login</button>
loginPage: function(){
    this.$router.push({ name: 'login', params: { username: this.username }})
},

<!--路由配置-->
{
	path: '/login/:username',
    name: 'login',
    component: login
}

query

1
2
3
4
5
6
7
8
9
10
11
<button @click="loginPage()" class="style">go to login</button>
loginPage: function(){
    this.$router.push({name:'login',query:{ username: this.username}});
},

<!--路由配置-->
{
	path: '/login',
    name: 'login',
    component: login
},

query与params

query 是正常的get 请求的参数传递。举个例子：

1
http://127.0.0.1:8080/?username=wzb

这个url中，query是指username=wzb，转化为json就是{username: wzb}。

params是restful中的参数，可以理解为后台的参数。很多路由都支持这样的格式，比如express：

1
2
3
4
5
6
7
8
var express = require('express')
var app = express()

app.get('/login/:username', () => {
   console.log('login' )
})

http://127.0.0.1:8080/login/wzb

当请求/login/wzb时，路由就会匹配到上面的方法。其中params就是指上面的username。转化为json就是{username:wzb}。

Reference

query和params的区别

vue-router