Vue路由的跳轉方式

Vue中路由的跳轉方式

一、<router-link to=''></router-link>

Header.vue

<template>
    <header>
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <a href="" class="navbar-brand">Pizz點餐系統</a>
            <ul class="navbar-nav">
                <li><router-link to="/admin" class="nav-link">管理</router-link></li>
                <li><router-link to="/about" class="nav-link">關於我們</router-link></li>
            </ul>
        </nav>
    </header>
</template>

 

router.js

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/admin',12       
12       component: () => import('./components/Admin.vue')
    },
    {
      path: '/about',16       
16　　　　component: () => import('./components/about/About.vue'),
    },
    {
      path:'*',
      redirect:'/'
    }
  ]
})

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

在下面的方法中main.js就不重復寫了

二、<router-link :to=''></router-link>,綁定數據的方式

Header.vue

 

<template>
     <header>
         <nav class="navbar navbar-expand-lg navbar-light bg-light">
             <a href="" class="navbar-brand">Pizz點餐系統</a>
             <ul class="navbar-nav">
                  <li><router-link :to="homeLink" class="nav-link">主頁</router-link></li>
             </ul>
         </nav>
     </header>
 </template>
<script>
export default{
    data(){
         return {
             homeLink:'/'
         }
     }
 }
 </script>

 

 

 

 router.js

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: () => import('./components/Home.vue')
    },
    {
      path:'*',
      redirect:'/'
    }
  ]
})

 

三、路由中定義name的方法

Header.vue

<template>
    <header>
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <a href="" class="navbar-brand">Pizz點餐系統</a>
            <ul class="navbar-nav">
                <li><router-link :to="{name:'menu'}" class="nav-link">菜單</router-link></li>
            </ul>
        </nav>
    </header>
</template>

    

router.js

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/menu',
      name: 'menu',
      component: () => import('./components/Menu.vue')
    },
    {
      path:'*',
      redirect:'/'
    }
  ]
})