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       component: () => import('./components/Admin.vue')
     },
     {
       path: '/about',       
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:'/'
     }
   ]
 })