vue-router

npm安裝
npm install vue-router

項目中使用（配置路由）

import Vue from 'vue'
import vueRouter from 'vue-router' //1.(加載路由)
import App from './App'
//路由
import Home from './components/Home'

Vue.use(vueRouter)  //2.通過vue.use安裝路由功能

const routes = [
  {
    path: '/', component: Home
  },
  {path:'*',redirect:'/Home'} //當用戶輸入頁面鏈接錯誤或者沒有該頁面時，顯示該路徑頁面
]

const router = new vueRouter({
    routes,
    mode:'history'//去掉鏈接中的#
})

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: {App},
  template: '<App/>'
})

{path:'*',redirect:'/'} //當用戶輸入頁面鏈接錯誤或者沒有該頁面時，顯示該路徑頁面 （首頁）

1.）路由--router-link

 router-link  瀏覽器加載默認爲a標籤    

 屬性：tag   改變router-link顯示的標籤   eg：tag="div"

2.）name屬性和路由跳轉

name  通過在配置路由時，添加name屬性    在router-link  上綁定該name

eg:   {path:'/',name:"homnelink",component:Home}

       頁面router-link上進行綁定     <router-link :to="{name:'homnelink'}"></router-link>

路由跳轉:

   1. goTo(){  //事件

           //跳轉到上一次瀏覽頁面   this.$router.go(-1)

           //指定跳轉地址                  this.$router.replace("/home")

           //跳轉指定路由下              this.$router.replace({name:'homeLink'})

           //通過push進行跳轉          this.$router.push('/home')

                                                    this.$router.push({name:'homeLink'})

     }

3.）路由嵌套（二級）

const routes = [
  {path: '/', name: "homeLink", component: Home},
  {path: '/About', name: "aboutLink", component: About},
  {
    path: '/Contact', component: Contact,
    children: [
      {path: '/Dis', component: Dis,},
      {path: '/kd', component: kd,},
      {path: '/Order', component: Order,},
    ]
  },
  {path: '/Login', component: Login},
  {path: '/Register', component: Register},
  {path: '*', redirect: "/"}
]

（三級）redirect屬性：前面說過，這裏只默認顯示的路由下內容

const routes = [
  {path: '/', name: "homeLink", component: Home},
  {path: '/About', name: "aboutLink", component: About},
  {
    path: '/Contact', component: Contact,redirect:"/Dis",
    children: [
      {
        path: '/Dis', component: Dis,redirect:"/dis/before",
        children:[
          {path:"/dis/before",component:Before},
          {path:"/dis/cur",component:Cur},
        ]
      },
      {path: '/kd', component: kd,},
      {path: '/Order', component: Order,},
    ]
  },
  {path: '/Login', component: Login},
  {path: '/Register', component: Register},
  {path: '*', redirect: "/"}
]

4）路由守衛

 1.路由守衛--（全局守衛）

用戶在沒有登錄的情況下，讓用戶登錄（此處確認之後，正常展示所有頁面）

// to:進入某一個路由
//form:從哪裏離開
//next:回調函數
router.beforeEach((to,form,next)=>{
    alert ('還沒有登錄,請先登錄');
    next()
})

這裏我們先打印to，看log結果 

router.beforeEach((to,form,next)=>{
    console.log(to)
})

 這裏將我們當前的頁面路由打印了出來

 

當用戶沒有登錄時，進入登錄頁面

//全局守衛
// to:進入某一個路由
//form:從哪裏離開
//next:回調函數
router.beforeEach((to, form, next) => {
  // alert ('還沒有登錄,請先登錄');
  // next();
  //console.log(to)
  //判斷store.gettes.isLogin ===false
  if (to.path == '/login' || to.path == '/register') {
    next()
  } else {
    alert('還沒有登錄,請先登錄');
    next('/login');
  }
})

2.路由守衛--（路由獨享守衛）

const routes = [
  {path: '/', name: "homeLink", component: Home},
  {
    path: '/About', name: "aboutLink", component: About,
    //路由獨享守衛
    beforeEnter: (to, form, next) => {
      alert('非登錄狀態,不能訪問此頁面');
      next(true) // true 正常展示  false  不能展示此頁面
    }
  },
  {path: '*', redirect: "/"}
]

const routes = [
  {path: '/', name: "homeLink", component: Home},
  {
    path: '/About', name: "aboutLink", component: About,
    //路由獨享守衛
    beforeEnter: (to, form, next) => {
       if (to.path == '/login' || to.path == '/register') {
        next()
      } else {
        alert('還沒有登錄,請先登錄');
        next('/login');
      }
    }
  },
  {path: '*', redirect: "/"}
]

3.路由守衛--（組件內守衛）

<script>
  export default {
    name: "contact",
    data() {
      return {
        title: "contact"
      }
    },
    beforeRouteEnter: (to, from, next) => {
      //alert(this.title)// undefined  在data渲染之前  beforeRouteEnter已經執行完了 所以得到undefined
      // next() //頁面正常顯示

      next(vm=>{ //next屬於異步操作
        alert(vm.title) //contact
      })
    },
    //離開頁面時
    beforeRouteLeave(to,from,next){
      if(confirm('確認離開嗎?')==true){
         next()
      }else{
         next(false)
      }
    }
  }
</script>

5）路由之-router-view複用

     1.在路由中配置

 {
    path: '/', name: "homeLink", components: {
      default:Home,
      'About':About,
      'kd':kd,
      'Order':Order
    }
  },

    ,2，需要木某個頁面使用，就加寫入 router-view 通過name  顯示

<div class="container">
      <div class="row">
        <div class="col-md-4">
            <router-view name="About"></router-view>
        </div>
        <div class="col-md-4">
          <router-view name="kd"></router-view>
        </div>
        <div class="col-md-4">
          <router-view name="Order"></router-view>
        </div>
      </div>
    </div>

6）將路由配置信息進行單獨js使用

 在src中新建router.js文件

//路由
import Home from './components/Home'

export const routes = [
  {
    path: '/', name: "homeLink", components: {
      default:Home,
      'About':About,
      'kd':kd,
      'Order':Order
    }
  },
]

在main.js中引入

import {routes} from './router'

目前就接觸了這麼多，其他的還要繼續學習哈！