Vue-Router 重定向与别名

by logan70

HTML

<script src="https://cdn.bootcss.com/vue/2.5.17/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>

<div id="app">
  <h1>Vue-Router 重定向与别名</h1>
  <p>
    <!-- 路由导航，to属性决定导航地址 -->
    <!-- router-link编译后默认渲染为a标签 -->
    <router-link to="/home">主页(/重定向至/home)</router-link>
    <br>
    <router-link to="/pagea">页面A</router-link>
    <br>
    <router-link to="/pageb">重定向至页面A(to="/pageb")</router-link>
    <br>
    <router-link to="/pagec">页面A别名(to="/pagec")</router-link>
    <br>
    <router-link to="/home/pagea">页面A别名(to="/home/pagea")</router-link>
  </p>
  <!-- 路由渲染出口 -->
  <router-view></router-view>
</div>

JavaScript

const Home = {template: `<div><p>主页（Home组件）</p></div>`}
const PageA = {template: `<div><p>页面A（PageA组件）</p></div>`}


const router = new VueRouter({
  routes : [
    {path: '/home',component: Home, name: 'home'},
    {path: '/pagea',component: PageA, name: 'pagea', alias: ['/pagec', '/home/pagea']},
    {path: '/pageb',redirect: {name: 'pagea'}},
    {path: '/',redirect: '/home'}
  ]
})


window.vueApp = new Vue({
  router
}).$mount('#app')