vue-router 路由基础的详解

JS：

// 四个模板
  const UserA = {
   template:'<p>我是one,ID是{{ $route.params.userId }}</p>',
  }
  const UserB = {
   template:'<p>我是two,ID是{{ $route.params.userId }}</p>',
  }
  const UserC = {
   template:'<p>我是three,ID是{{ <1ro></1ro>ute.params.userId }}</p>',
  }
  const UserD = {
   template:'<p>我是four,ID是{{ $route.params.userId }}</p>',
  }
  const router = new VueRouter({
   routes:[
   // name 一一对应上
     {
      path:'/user/:userId',
      name:"userOne",
      components:{ // 注意这里为components 多个“ s ”
        default:UserA,
        b:UserB
      }
     },
     {
      path:'/user/:userId',
      name:"userTwo",
      components:{
        default:UserD,
        b:UserC
      }
    }
   ]  });
  var myVue = new Vue({
    router
  }).$mount("#myDiv")

六、重定向 和 别名

重定向 和别名，首先我先来解释一下什么叫做重定向和别名

『重定向』的意思是，当用户访问 /a时，URL 将会被替换成 /b，然后匹配路由为 /b，

『别名』 /a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样。/a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样。
重定向主要用参数：redirect 而别名主要用到参数： alias

HTML:

<div id="myDiv">
 <h2>效果查看地址栏最后面的变化</h2>
 <router-link to="/User/foo">Go to foo</router-link>
 <router-link to="/User/bar">Go to bar</router-link>
 <router-link to="/User/Car">Go to bar</router-link> 
  <router-view></router-view>
</div> 

JS:

  const User = {
   template:'<p>我是同一个页面</p>',
  }
  const router = new VueRouter({
   mode:"history",
   routes:[
     { path:'/User/foo',component:User},
     { path:'/User/bar',redirect: '/User/foo',component:User},
     // 重定向的目标也可以是一个命名的路由：
     // 甚至是一个方法，动态返回重定向目标：
     // 别名设置
     { path:'/User/foo',alias: '/User/Car'}
   ]  });
  var myVue = new Vue({
    router
  }).$mount("#myDiv")

如有疑问请留言或者到本站社区交流讨论，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！