Hey,吃完饭多陪陪家人吧！

Vue.js路由Router/重定向/别名

发布于2018-6-10 分类：JS / Vue.js / 前端 评论(0) 阅读(2,680)
　　　

Vue.js的路由，可以使不同内容（视图）之间快速切换而不需要刷新页面，所以非常适合做单页应用。用到  Vue-Router当然需要引入vue-router.js，要将vue-router.js放在vue.js的后面哦。

  1.     <div id="app">
  2.       <aside>
  3.         <ul class="ulNav">
  4.           <li>
  5.             <router-link to="/index">首页</router-link>
  6.           </li>
  7.           <li>
  8.             <router-link to="/live">生活</router-link>
  9.           </li>
  10.           <li>
  11.             <router-link to="/activity">娱乐</router-link>
  12.           </li>
  13.         </ul>
  14.       </aside>
  15.       <content>
  16.         <!--路由链接对应的内容会渲染到这里-->
  17.         <router-view></router-view>
  18.       </content>
  19.     </div>
  20. <script src="vue.js"></script>
  21. <script src="vue-router.js"></script>
  22. <script>
  23.     //创建三个路由模板
  24.     let indexComponent = {
  25.     template:
  26.       `<div>
  27.       首页
  28.       </div>`
  29.   }
  30.   let liveComponent = {
  31.     template:
  32.       `<div>
  33.       生活栏目
  34.       </div>`
  35.   }
  36.   let activityComponent = {
  37.     template:
  38.       `<div>
  39.       娱乐栏目
  40.       </div>`
  41.   }
  42.   //声明路由
  43.   let router = new VueRouter({
  44.     routes : [
  45.       {
  46.         path: "/index",
  47.         component: indexComponent
  48.       },
  49.       {
  50.         path: "/live",
  51.         component : liveComponent
  52.       },
  53.       //路由别名
  54.       {
  55.         path: "/activity",
  56.         component : activityComponent,
  57.         alias: "/act"
  58.       },
  59.       //重定向，将首页/指向#/index
  60.        {
  61.         path: "/",
  62.         redirect: "/index",
  63.         alias: "/i"
  64.       }
  65.     ]
  66.   });
  68.   let vm = new Vue({
  69.     el: "#app",
  70.     //绑定路由
  71.     router
  72.   });
  73. </script>

运行效果：

Vue.js重定向代码：

  1. {
  2.        path: "/",
  3.        redirect : "/index"
  4.      }

访问首页时，自动重定向到#/index，这个经常用到。

Vue.js路由别名：

  1. {
  2.         path: "/activity",
  3.         component : activityComponent,
  4.         alias: "/act"
  5.       }

别名alias，意思就是当用户访问/act时，浏览器的url会是/act，但页面的内容是/activity的内容，就像直接访问/activity一样。

在线演示

未经允许不得转载：Rising Sun's Blog » JS / Vue.js / 前端 » Vue.js路由Router/重定向/别名
标签：
评论 0
 
 
发表评论