在路由里这么写:
{
path: '/project/:name',
name: 'Project',
component: Project
},
在vue2.0中,原来的v-link指令已经被<router-link>组件替代了,<router-link>
组件支持用户在具有路由功能的应用中 (点击) 导航。 通过 to
属性指定目标地址,默认渲染成带有正确链接的 <a>
标签,可以通过配置 tag
属性生成别的标签.。另外,当目标路由成功激活时,链接元素自动设置一个表示激活的 CSS 类名。就相当于一个增强版的a标签吧。
<router-link>
比起写死的 <a href="...">
会好一些,理由如下:
- 无论是 HTML5 history 模式还是 hash 模式,它的表现行为一致,所以,当你要切换路由模式,或者在 IE9 降级使用 hash 模式,无须作任何变动。
- 在 HTML5 history 模式下,
router-link
会守卫点击事件,让浏览器不再重新加载页面。 - 当你在 HTML5 history 模式下使用
base
选项之后,所有的to
属性都不需要写 (基路径) 了。
本质,RouterView【命令视图】和RouterLink【命令路线】本身是两个组件。开发的时候有时候会遇到比如 点击这个链接跳转到其他组件的情况,氮素,我们不想跳转到新页面,只在当前页面切换着显示,那么就要涉及到路由的嵌套了,也可以说是子路由的使用。
这两个可以组成一个tab导航,RounterLink充当表头,RouterView充当内容,就是如此。
在<router-link>
我们加入一个 params
属性来指定具体的参数值
<li> <router-link :to ="{name:'Project',params :{id:1}}" > <div>首页</div> </router-link> </li>
上面的链接对应就为:http://localhost:8080/project/1
如何从路由中将这个参数值读取出来呢?
通过 $route.params
这个属性获取指定的参数值,如:this.$route.params.id
,this.$route.params.msg