<强> html
router-link:跳转链接
参数:就是跳转到的链接位置
二层链接如:
& lt; router-link="/用户/埃文”祝辞/用户/evan
需要配置所对应的对应的孩子
儿童所对应的参数
路径:可分我固定的参数url和带参数的,区别于:(冒号)
名称:对应的参数的模块名称(动态传参数)
组件:可以传多个组件
例如:
{路径:“/?//一个路由可以定义多个命名组件//将呈现& lt; router-view>与相应的名称。
组件:{
默认值:Foo,
答:酒吧,
b:巴兹
}
},
:="{名称:“用户”,参数:{用户名:“伊万”},查询:{foo: '酒吧'}}”
参数说明参数对应的是孩子的路径的值,对中的名字为vueRouter中
的名称
当要传多个参数时
{路径:“用户名/:aaa”,名字:‘用户’,组件:用户}
也可以利用查询传值
查询:{foo: '酒吧'}
例如:路径:“:用户名”
重定向:链接直接指向指定的方向(重定向)
beforeEnter:
·
{路径:/仪表盘,组件:仪表盘、beforeEnter: requireAuth},
函数requireAuth(路线,重定向,然后){
如果(! auth.loggedIn ()) {
重定向({
路径:/登录,
查询:{重定向:路线。fullPath}
}）
其他}{
next ()
}
}
使用道具将组件和路由解耦:
在组件中使用美元路线会使之与其对应路由形成高度耦合,从而使组件只能在某些特定的url上使用,限制了其灵活性。
对应的参数的值的获取
{{route.params美元。username1}}
{路径:/用户,组件:用户,
孩子:(
{路径::用户名,名字:‘用户’,组件:用户}
]
}
,
& lt; ul>
& lt; li> & lt; router-link="/"祝辞/& lt;/router-link> & lt;/li>
& lt; li> & lt; router-link="/" exact>/(精确匹配)& lt;/router-link> & lt;/li>
& lt; li> & lt; router-link="/用户”祝辞/users & lt;/li>
& lt; li> & lt; router-link="/用户" exact>/用户(精确匹配)& lt;/router-link> & lt;/li>
& lt; li> & lt; router-link="/用户/埃文”祝辞/用户/evan & lt;/li>
& lt; li> & lt; router-link="/用户/埃文# foo”祝辞/用户/埃文# foo & lt;/li>
& lt; li>
& lt; router-link:="{路径:/用户/埃文,查询:{foo: '酒吧'}}”在/用户/埃文# 63;foo=酒吧
& lt;/router-link>
& lt;/li>
& lt; li> & lt; !——# 635——比;
& lt; router-link:="{名称:“用户”,参数:{用户名:“伊万”},查询:{foo: '酒吧'}}“exact>/用户/埃文# 63;foo=bar(命名视图+精确匹配)
& lt;/router-link>
& lt;/li>
& lt; li>
& lt; router-link:="{路径:/用户/埃文,查询:{foo:“酒吧”,记者:“qux}}”在/用户/埃文# 63;foo=bar&巴兹=qux
& lt;/router-link>
& lt;/li>
& lt; li> & lt; router-link="/白４?about & lt;/li>
& lt; router-link标签="李"="/氨?
& lt; a>/对(活跃类>
const路由器=new VueRouter ({
模式:“历史”,
基地:__dirname,
路线:[
{路径:‘/?组件:回家},
{路径:'/',组件:关于},
{路径:/用户,组件:用户,
孩子:(
{路径::用户名,名字:‘用户’,组件:用户}
]
}
]
})
<强> js: vue-router配置
router-view:组件的放置位置
对应的链接所对应的组件的配置
路由底下的子组件
{路径:/用户,组件:用户,
孩子:(
{路径::用户名,名字:‘用户’,组件:用户}
]
}
//组件
Vue.use (VueRouter)
const回家={模板:' & lt; div> & lt; h3> Home & lt;/div> '}
const约={模板:' & lt; div> & lt; h3> About & lt;/div> '}
const用户={
模板:
& lt; div>
& lt; h3> Users
& lt; router-view> & lt;/router-view>
& lt;/div>
”
}
const用户={模板:' & lt; div> {{route.params美元。用户名}}& lt;/div>}
