想学习Vue的SPA应用,路由这一块是必不可少的。在刚接触时候也许有些困惑,在我学习并成功使用了vue-router后,将我的个人经 验分享出来,希望可以让同样对路由不知所措的同学有所帮助。
官网:https://router.vuejs.org/zh-cn/essentials/history-mode.html
router-link
router-link
标签用于页面的跳转。
<router-link to="/page01">page01</router-link>
点击这个router-link
标签router-view
就会渲染路径为/page01
的页面。
注意:router-link
默认是一个a标签的形式,如果需要显示不同的样子,可以在router-link
标签中写入不同标签元素,如下显示为button
按钮,但不能在router-link
标签上添加@click事件,添加的事件不起作用。
<router-link to="/04">
<button>to04</button>
</router-link>
router.push
下面我们通过JS代码控制路由的界面渲染,官方是写法如下:
// 字符串
router.push('home')
// 对象
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})
// 带查询参数,变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})
那么问题来了,如果是全局注册的路由Vue.use(VueRouter)
,应该怎么写呢?
// 字符串
this.$router.push('home')
// 对象
this.$router.push({ path: 'home' })
// 命名的路由
this.$router.push({ name: 'user', params: { userId: 123 }})
// 带查询参数,变成 /register?plan=private
this.$router.push({ path: 'register', query: { plan: 'private' }})
push方法其实和<router-link :to="...">
是等同的。
注意:push方法的跳转会向 history 栈添加一个新的记录,当我们点击浏览器的返回按钮时可以看到之前的页面。
router.replace
push方法会向 history 栈添加一个新的记录,而replace方法是替换当前的页面,不会向 history 栈添加一个新的记录。用法如下
template
<router-link to="/05" replace>05</router-link>
script
this.$router.replace({ path: '/05' })
router.go
go方法用于控制history记录的前进和后退
// 在浏览器记录中前进一步,等同于 history.forward()
this.$router.go(1)
// 后退一步记录,等同于 history.back()
this.$router.go(-1)
// 前进 3 步记录router.go(3)
// 如果 history 记录不够用,那就默默地失败呗
this.$router.go(-100)
this.$router.go(100)
其实很好理解:go方法就是浏览器上的前进后退按钮,后面的参数就是前进和后退的次数
四、路由的传参方式
在路由跳转的过程中会传递一个object,我们可以通过watch
方法查看路由信息对象。
watch: {
'$route' (to, from) {
console.log(to);
console.log(from);
},
},
console中看到的路由信息对象
{
...
params: { id: '123' },
query: { name: 'jack' },
...
}
这两个参数会在页面跳转后写在路径中,路径相当于/page/123?name=jack
1. params
其实这个params我还是有一些疑惑的,就比如下面的写法:
<router-link :to="{ path: '/05', params: { sex: 'hello param', sex2: 'hello param2' }, query: { name: 'hello query', name2: 'hello query2' }}">05</router-link>
传递过去的数据却没有包含params的数据。
{
...
params: {},
query: {
name: 'hello query',
name2: 'hello query2'
}
...
}
下面是我暂时调试成功的一些结论。
传递数据
在路由配置文件中定义参数
//命名路由&路由传参
{ name: 'com03', path: '/03/:sex', component: Page03 },
路径后面的/:sex
就是我们要传递的参数。
this.$router.push({ path: '/03/441'})
此时路由跳转的路径
http://localhost:8080/#/03/441
此时我们看到查看路由信息对象:
{
...
params: {
sex: '441'
}
...
}
获取数据
template
<h2> {{ $route.params.sex }} </h2>
script
console.log(this.$route.params.sex)
注:暂时我只发现在动态路由匹配中传入数据可以获取到params。而使用{ path: '/', params: { sex: '123' }, query: { ...}}
传递的数据使用没有传递给下一个页面组件。如果有使用成功的同学欢迎在留言,我会及时更正的。
2. query
query传递数据的方式就是URL常见的查询参数,如/foo?user=1&name=2&age=3
。很好理解,下面就简单写一下用法以及结果
传递数据
template
<router-link :to="{ path: '/05', query: { name: 'query', type: 'object' }}" replace>05</router-link>
script
this.$router.replace({ path: '/05', query: { name: 'query', type: 'object' }})
路径结果
http://localhost:8080/#/05?name=query&type=object
路由信息对象
{
...
query: {
name: "query",
type: "object"
}
...
}
获取数据
获取数据和params是一样的。
template
<h2> {{ $route.query.name }} </h2>
script
console.log(this.$route.query.type)
比较不错的vue-router博客、网站:
2、http://www.cnblogs.com/axl234/p/5899952.html