vue - 路由精講 - 代碼抽離和復用router-view

1.將之前所寫的main.js中的 路由代碼 進行抽離

首先我們在src文件夾下建立一個routes.js文件，然后把   import 引入Home 組件開始，一直到三級路由中PersonName組件得代碼和  const routers = [ ] 代碼抽離到  routes.js 中。只要在抽離后的routes.js的代碼  const routers = [ ]  前面加個export 表示公開，，就OJBK 了。同時，為了代碼簡潔，把  拋磚引玉 且  目前沒有什么用的  全局守衛代碼  刪除。

 

main.js代碼

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import Home from './components/Home.vue'
import Menu from './components/Menu.vue'
import Admin from './components/Admin.vue'
import About from './components/about/About.vue'
import Login from './components/Login.vue'
import Register from './components/Register.vue'

//二級路由
import Contact from './components/about/Contact.vue'
import Delivery from './components/about/Delivery.vue'
import History from './components/about/History.vue'
import OrderingGuide from './components/about/OrderingGuide.vue'

//三級路由
import Phone from './components/about/contact/Phone.vue'
import PersonName from './components/about/contact/PersonName.vue'




Vue.use(VueRouter)

const routes = [
    {path:'/',      name:'homeLink',   component:Home},
    {path:'/menu',  name:'menuLink',   component:Menu},
    {path:'/admin', name:'adminLink',  component:Admin},
    {path:'/about', name:'aboutLink', redirect:'/about/contact', component:About, children:[
        {path:'/about/contact', name:'contactLink', redirect:'/personName', component:Contact, children:[
            {path:'/phone', name:"phoneNumber", component:Phone},
            {path:'/personName', name:"personName", component:PersonName},
        ]},
        {path:'/history',name:'historyLink',component:History},
        {path:'/delivery',name:'deliveryLink',component:Delivery},
        {path:'/orderingGuide',name:'orderingGuideLink',component:OrderingGuide},
    ]},
    {path:'/login', name:'loginLink',  component:Login},
    {path:'/register', name:'registerLink', component:Register},
    // {path:'*',redirect:'/'},
]

const router = new VueRouter({
    routes,
    mode:'history'
})


// //全局守衛
// router.beforeEach((to,from,next)=>{
//     // alert("還沒有登錄，請先登陸");
//     // next();
//     // console.log(to);

//     //判斷store.gettes.isLogin === false
//     if(to.path == '/login' || to.path == '/register'){
//         next();
//     }else{
//         alert("還沒有登錄，請先登陸");
//         next('/login');
//     }
// })

new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

 

routes.js 代碼

import Home from './components/Home.vue'
import Menu from './components/Menu.vue'
import Admin from './components/Admin.vue'
import About from './components/about/About.vue'
import Login from './components/Login.vue'
import Register from './components/Register.vue'

//二級路由
import Contact from './components/about/Contact.vue'
import Delivery from './components/about/Delivery.vue'
import History from './components/about/History.vue'
import OrderingGuide from './components/about/OrderingGuide.vue'

//三級路由
import Phone from './components/about/contact/Phone.vue'
import PersonName from './components/about/contact/PersonName.vue'


export const routes = [
    {path:'/',      name:'homeLink',   component:Home},
    {path:'/menu',  name:'menuLink',   component:Menu},
    {path:'/admin', name:'adminLink',  component:Admin},
    {path:'/about', name:'aboutLink', redirect:'/about/contact', component:About, children:[
        {path:'/about/contact', name:'contactLink', redirect:'/personName', component:Contact, children:[
            {path:'/phone', name:"phoneNumber", component:Phone},
            {path:'/personName', name:"personName", component:PersonName},
        ]},
        {path:'/history',name:'historyLink',component:History},
        {path:'/delivery',name:'deliveryLink',component:Delivery},
        {path:'/orderingGuide',name:'orderingGuideLink',component:OrderingGuide},
    ]},
    {path:'/login', name:'loginLink',  component:Login},
    {path:'/register', name:'registerLink', component:Register},
    // {path:'*',redirect:'/'},
]

 

 

抽離后的main.js代碼

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import {routes} from './routes.js'

Vue.use(VueRouter)

const router = new VueRouter({
    routes,
    mode:'history'
})

new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

 

 

 

2.復用router-view

應用場景：比如我們想在  主頁  中展示  歷史訂單   快遞信息  點餐文檔 這三個部分的信息，可以使用  router-view 復用。

具體步驟：在app.vue添加展示的內容，然后在routes.js 中   

 把原本的   componet:Home 展示的單個組件變成componets復數，然后一個對象{}，在里面添加組件。

一進來就添加  default:Home,  組件， 然后再是添加需要展示的組件模塊。具體代碼如下

 

 

app.vue代碼

<template>
  <div id="app">
    <div class="container">
      <app-header></app-header>
    </div>

    <div class="container">
        <router-view></router-view>
    </div>

    <div class="container">
12       <div class="row">                                    //代表行
13         <div class="col-sm-12 col-md-4">                   //小屏模式下展示12列，中屏展示四列。
14           <router-view name="orderingGuide"></router-view>
15         </div>
16         <div class="col-sm-12 col-md-4">
17           <router-view name="delivery"></router-view>
18         </div>
19         <div class="col-sm-12 col-md-4">
20           <router-view name="history"></router-view>
21         </div>
22       </div>
23     </div>
  </div>
</template>

<script>
import Header from './components/Header.vue';
export default {
  components:{
    //"app-header":Header
    appHeader:Header
  }
}
</script>

<style>

</style>

 

 

 routes.js添加的代碼

export const routes = [
    {path:'/',      name:'homeLink',   components:{ 3 default:Home, 4 'orderingGuide':OrderingGuide, 5 'delivery':Delivery, 6 'history':History 7 }}, 8     {path:'/menu',  name:'menuLink',   component:Menu},
    {path:'/admin', name:'adminLink',  component:Admin},