傳參和動(dòng)態(tài)路由
使用query傳參
<router-link to="/ChildB?name=admin">ChildB-admin</router-link>?
<router-link to="/ChildB?name=zhangsan">ChildB-zhangsan</router-link>
在ChildB組件中用watch監(jiān)聽傳參$route.query，msg來(lái)表示相應(yīng)傳參對(duì)應(yīng)的值
watch: {
? ? ? /* 通過(guò)計(jì)算屬性也可以實(shí)現(xiàn)，計(jì)算屬性具有緩存功能
? ? ? ? ?全局的路由屬性$route發(fā)生了變化，也會(huì)觸發(fā)計(jì)算屬性*/
? ? $route: {
? ? ? handler() {
? ? ? ? if (this.$route.query.name == "admin") {
? ? ? ? ? this.msg = "歡迎admin管理員";
? ? ? ? } else if (this.$route.query.name == "zhangsan") {
? ? ? ? ? this.msg = "歡迎zhansgan貴賓一位,請(qǐng)上三樓";
? ? ? ? }else{
? ? ? ? ? ? this.msg = "您還不是會(huì)員，請(qǐng)充值";
? ? ? ? }
? ? ? },
? ? ? /* 進(jìn)入ChildB組件就執(zhí)行 */
? ? ? immediate:true
? ? },
? }
動(dòng)態(tài)路由傳參
<router-link to="/ChildA/1">ChildA--1</router-link>?
<router-link to="/ChildA/2">ChildA--2</router-link>
第一種方式
main,js文件中對(duì)應(yīng) path: '/childA/:id'
在ChildA組件中用watch監(jiān)聽傳參$route.params，msg來(lái)表示相應(yīng)傳參對(duì)應(yīng)的值
watch:{
? ? ? ? $route:{
? ? ? ? ? ? handler(){
? ? ? ? ? ? ? ? if(this.$route.params.id==1){
? ? ? ? ? ? ? ? ? ? this.msg='我是id1'
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? if(this.$route.params.id==2){
? ? ? ? ? ? ? ? ? ? this.msg='我是id2'
? ? ? ? ? ? ? ? }
? ? ? ? ? ? },
? ? ? ? ? ? immediate:true? ? ?/* 一進(jìn)入組件就執(zhí)行 */
? ? ? ? }
? ? }
也可以使用計(jì)算屬性的寫法
computed: {
? ? str() {
let id = this.$route.params.id;
? ? ? if (id == 1) {
? ? ? ? return "我是id1";
? ? ? } else if (id == 2) {
? ? ? ? return "我是id2";
? ? ? } else {
? ? ? ? return "";
? ? ? }?
第二種方式
main,js文件中對(duì)應(yīng) path: '/childA/:id',props: true,
在childA里可以使用props接收傳參
props:['id'],
if (this.id == 1) {
? ? ? ? return "我是id1";
? ? ? } else if (this.id == 2) {
? ? ? ? return "我是id2";
? ? ? } else {
? ? ? ? return "";
? ? ? }
添加路由
addR(){
? ? ? this.$router.addRoute({
? ? ? ? path:'/vip',
? ? ? ? name:"vip",
? ? ? ? component:()=>import('@/views/VipView.vue')
? ? ? })
? ? }
添加子路由
addA(){
? ? ? /* 這里的about是name不是path */
? ? ? this.$router.addRoute('about',{
? ? ? ? path:'AboutChildC',
? ? ? ? name:'AboutChildC',
? ? ? ? component:()=>import('@/views/AboutChildC.vue')
? ? ? })
? ? }
?$route 和 $router的區(qū)別
? ? ? ?$route可以獲取路由的屬性 比如query傳參 動(dòng)態(tài)路由
? ? ? ?$router提供了一些方法，push跳轉(zhuǎn)頁(yè)面，addRoute增加路由 包括一些路由信息，比如當(dāng)前所在路由$router.currentRoute
頁(yè)面跳轉(zhuǎn)
goAbout(){
? ? ? /* 只跳轉(zhuǎn)一次，多次會(huì)報(bào)錯(cuò) ?在router中可以解決 */
? ? ? /* 第一種方式：? this.$router.push('/about') */
? ? ? ? ?第二種方式：? this.$router.push({name:'about'})
? ? }
解決多次報(bào)錯(cuò)的方法是在main.js文件中加上如下片段：本質(zhì)上就是不報(bào)錯(cuò)，捕獲錯(cuò)誤信息
const VueRouterPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(to) {
? return VueRouterPush.call(this, to).catch(err => err)
}
全局路由鉤子函數(shù)
全局路由守衛(wèi)?
router.beforeEach((to, from, next) => {
? /* to表示要去的路由
? from表示之前的路由
? next表示要去執(zhí)行的行數(shù) */
? /* console.log('to',to);
? console.log('from',from);
? console.log('next',next); */
? next()
})
監(jiān)聽全局路由離開時(shí)觸發(fā)的鉤子函數(shù),★沒(méi)有next()?
router.afterEach((to,from)=>{
? console.log(to);
? console.log(from);
})?
局部路由鉤子
{
? ? path: '/childB',
? ? name: 'childB',
? ? component: () => import(/* webpackChunkName: "about" */ '../components/ChildB.vue'),
? ? /* 局部的路由鉤子函數(shù)進(jìn)入路由的時(shí)候觸發(fā) */
因?yàn)閰?shù)或者是動(dòng)態(tài)路由，在同一個(gè)路由下不會(huì)觸發(fā)beforeEnter?
? ? beforeEnter: (to, from, next) => {
? ? ? /* console.log('to',to);
? ? ? ? ?console.log('from',from);
? ? ? ? ?console.log('next',next); */
? ? ? next()
? ? }
? }
