Vue路由的跳转方式

Vue中路由的跳转方式

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

Header.vue

 1 <template>
 2     <header>
 3         <nav class="navbar navbar-expand-lg navbar-light bg-light">
 4             <a href="" class="navbar-brand">Pizz点餐系统</a>
 5             <ul class="navbar-nav">
 6                 <li><router-link to="/admin" class="nav-link">管理</router-link></li>
 7                 <li><router-link to="/about" class="nav-link">关于我们</router-link></li>
 8             </ul>
 9         </nav>
10     </header>
11 </template>

 

router.js

 1 import Vue from 'vue'
 2 import Router from 'vue-router'
 3 
 4 Vue.use(Router)
 5 
 6 export default new Router({
 7   mode: 'history',
 8   base: process.env.BASE_URL,
 9   routes: [
10     {
11       path: '/admin',12       
12       component: () => import('./components/Admin.vue')
13     },
14     {
15       path: '/about',16       
16　　　　component: () => import('./components/about/About.vue'),
17     },
18     {
19       path:'*',
20       redirect:'/'
21     }
22   ]
23 })

main.js

 1 import Vue from 'vue'
 2 import App from './App.vue'
 3 import router from './router'
 4 import store from './store'
 5 
 6 Vue.config.productionTip = false
 7 
 8 new Vue({
 9   router,
10   store,
11   render: h => h(App)
12 }).$mount('#app')

在下面的方法中main.js就不重复写了

二、<router-link :to=''></router-link>,绑定数据的方式

Header.vue

 

 1 <template>
 2      <header>
 3          <nav class="navbar navbar-expand-lg navbar-light bg-light">
 4              <a href="" class="navbar-brand">Pizz点餐系统</a>
 5              <ul class="navbar-nav">
 6                   <li><router-link :to="homeLink" class="nav-link">主页</router-link></li>
 7              </ul>
 8          </nav>
 9      </header>
10  </template>
11 <script>
12 export default{
13     data(){
14          return {
15              homeLink:'/'
16          }
17      }
18  }
19  </script>

 

 

 

 router.js

 1 import Vue from 'vue'
 2 import Router from 'vue-router'
 3 
 4 Vue.use(Router)
 5 
 6 export default new Router({
 7   mode: 'history',
 8   base: process.env.BASE_URL,
 9   routes: [
10     {
11       path: '/',
12       name: 'home',
13       component: () => import('./components/Home.vue')
14     },
15     {
16       path:'*',
17       redirect:'/'
18     }
19   ]
20 })

 

三、路由中定义name的方法

Header.vue

 1 <template>
 2     <header>
 3         <nav class="navbar navbar-expand-lg navbar-light bg-light">
 4             <a href="" class="navbar-brand">Pizz点餐系统</a>
 5             <ul class="navbar-nav">
 6                 <li><router-link :to="{name:'menu'}" class="nav-link">菜单</router-link></li>
 7             </ul>
 8         </nav>
 9     </header>
10 </template>
11 
12

router.js

 1 import Vue from 'vue'
 2 import Router from 'vue-router'
 3 
 4 Vue.use(Router)
 5 
 6 export default new Router({
 7   mode: 'history',
 8   base: process.env.BASE_URL,
 9   routes: [
10     {
11       path: '/menu',
12       name: 'menu',
13       component: () => import('./components/Menu.vue')
14     },
15     {
16       path:'*',
17       redirect:'/'
18     }
19   ]
20 })

 

posted @ 2019-08-05 14:52  典墨  阅读(5415)  评论(0)  编辑  收藏  举报