vue

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     }},
    {path:'/menu',  name:'menuLink',   component:Menu},
    {path:'/admin', name:'adminLink',  component:Admin},