Vue-router

我们都知道传统的页面跳转是会刷新整个页面的,如果用户的带宽不是很理想,那给用户的体验就不太舒服了。

而vue路由恰恰就是提升用户这方面的体验,可以进行局部刷新,就是传说中的spa.

一、路由的跳转

第一步: 定义路由跳转的组件

const Foo={ template:'

foo

'}

第二步:定义路由规则的对象

const routes = [

{ path:"/foo", component: Foo },

]

const router =new VueRouter ( {

routes

} )

第三步:创建Vue 对象, 并注入创建的路由对象

const app= new Vue ( {

router

} ) .$mount (" #app ")

第四步:在模板中编写路由跳转链接

GO!

匹配到的路由将会在这里被渲染

二、路由参数的获取

定义路由路径的时候,可以指定参数。参数需要通过路径进行标识:/user/:id就是定义了一个规则,/user开头,然后后面的就是id参数的值。

比如:

路由规则: /user/:id

/user/9 等于 id = 9

然后在跳转后的vue中可以通过this.$route.params.参数名获取对应的参数。

日记本

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

赞赏支持
被以下专题收入,发现更多相似内容