react router @4 和 vue路由詳解(全)

時間 2020-05-30

標籤 react router vue 路由詳解欄目 React 简体版

原文原文鏈接

react router @4 和 vue路由

本文大綱：javascript

一、vue路由基礎和使用html

二、react-router @4用法vue

三、什麼是包容性路由？什麼是排他性路由？java

四、react路由有兩個重要的屬性：children和render的區別？react

五、react如何在路由裏面定義一個子路由？vue-router

六、vue如何在路由裏面定義一個子路由？npm

七、react怎麼經過路由傳參？api

八、vue怎麼經過路由傳參？數組

九、怎麼在react裏拿到router對象？瀏覽器

十、怎麼在vue裏拿到router對象？

十一、路由怎麼回退？

十二、react路由守衛？

1三、vue路由守衛？

一、vue路由基礎和使用

　　a、大概目錄

我這裏建了一個router文件夾，文件夾下有index.html

　　b、準備工做：

　　　　npm install vue-router

　　　　或者 yarn add vue-router

　　c、配置

　　　　必需要經過 Vue.use() 明確地安裝路由功能：
　　　　在你的文件夾下的 src 文件夾下的 main.js 文件內寫入如下代碼

import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter)

　　　　附上個人代碼：我是將router的內容寫在了個人router文件夾下的index.html中，而後暴露出去，在main.js中引入

　　　　router文件夾下的index.html

import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) import Home from 'pages/Home' import Map from 'components/Map' import Home1 from 'components/Home1' import Find from 'components/Find' import Mine from 'components/Mine' import Type from 'components/Type' import Publish from 'components/Publish' import Search from 'components/Search' import Success from 'components/Success' import Need from 'components/Need' import Position0 from 'components/Position' import Like from 'components/scrollX/Like' import S1 from 'components/scrollX/1' import S2 from 'components/scrollX/2' import Listall from 'components/mine/Listall' import Listone from 'components/mine/Listone' import Listchange from 'components/mine/Listchange' const routes = [ { path:'/', redirect:'/ho' }, { path: '/ho', redirect:'/ho/home', component: Home, children: [ { name: 'home', path: 'home', component: Home1, redirect:'/ho/home/like', children :[ { name: 'like', path: 'like', component: Like }, { name: '2000001', path: '2000001', component: S1 }, { name: '2000022', path: '2000022', component: S2 } ] }, { name: 'type', path: 'type', component: Type }, { name: 'need', path: 'need', component: Need }, { name: 'find', path: 'find', component: Find }, { name: 'mine', path: 'mine', component: Mine } ] }, { name: 'search', path: '/search', component: Search }, { name: 'position', path: '/position', component: Position0 }, { name: 'publish', path: '/publish', component: Publish }, { name: 'success', path: '/success', component: Success }, { name: 'listall', path: '/listall', component: Listall }, { name: 'listone', path: '/listone', component: Listone }, { name: 'listchange', path: '/listchange', component: Listchange }, { name: 'map', path: '/map', component: Map } ] const router = new VueRouter({ mode: 'history', routes }) export default router

　　　　main.js

import Vue from 'vue' import App from './App.vue' import router from './router' Vue.use(MintUI) Vue.use(ElementUI); Vue.config.productionTip = false

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

　　d、常規使用

　　　　 <router-view></router-view>路由匹配到的組件將渲染在這裏

　　　　你能夠把他理解爲一個版塊，好比如今有一個home頁面，分爲兩部分，內容部分和ibar部分，如圖：

　　　　這五個頁面共用下面的導航欄，只有導航欄上面的內容不一樣

　　　　<router-view></router-view>就能夠寫在<Ibar></Ibar>的上面

<template>
    <div class="home">
        <router-view></router-view>
        <Ibar></Ibar>
    </div>
</template>

　　　　那麼在Ibar頁面中如何切換路由呢？

<template>
    <div class="ibar">
        <router-link to="/ho/home" tag="span" active-class="active">首頁</router-link>
        <router-link to="/ho/type" tag="span" active-class="active">類別</router-link>
        <router-link to="/ho/need" tag="span" active-class="active">需求</router-link>
        <router-link to="/ho/find" tag="span" active-class="active">發現</router-link>
        <router-link to="/ho/mine" tag="span" active-class="active">個人</router-link>
    </div>
</template>

　　　　注意：此處的tag=「span」表明這個按鈕是個span標籤，你能夠寫樣式的時候直接寫span標籤的樣式便可

　　　　　　　此處的active-class="active"表明點擊哪一個按鈕哪一個按鈕高亮

　　　　此時咱們詳細看一下router文件夾下的index.js

//引入vue  
import Vue from 'vue'

//引入路由
 import VueRouter from 'vue-router'

//把路由掛載到vue上
 Vue.use(VueRouter) 
//引入我各個路由對應的component組件
 import Home from 'pages/Home' import Map from 'components/Map' import Home1 from 'components/Home1' import Find from 'components/Find' import Mine from 'components/Mine' import Type from 'components/Type' import Publish from 'components/Publish' import Search from 'components/Search' import Success from 'components/Success' import Need from 'components/Need' import Position0 from 'components/Position' import Like from 'components/scrollX/Like' import S1 from 'components/scrollX/1' import S2 from 'components/scrollX/2' import Listall from 'components/mine/Listall' import Listone from 'components/mine/Listone' import Listchange from 'components/mine/Listchange'
 const routes = [ {

　　　　 //path是路由的路徑
 path:'/',

　　　　 //redirect表明重定向，由於當前路徑'/'並無對應的組件，因此須要重定向到其餘路由頁面
　　　　 redirect:'/ho' }, { path: '/ho', redirect:'/ho/home',

　　　　 //當不須要重定向的時候，須要component寫上當前路由對應的組件頁面
 component: Home,

　　　　 //有些路由還有子路由，須要用到children[],
　　　　 //當訪問的時候，<router-link>的屬性to的時候要把全部的父組件都帶上
　　　　 //如:此處的/ho/home/like
 children: [ { name: 'home', path: 'home', component: Home1, redirect:'/ho/home/like', children :[ { name: 'like', path: 'like', component: Like }, { name: '2000001', path: '2000001', component: S1 }, { name: '2000022', path: '2000022', component: S2 } ] }, { name: 'type', path: 'type', component: Type }, { name: 'need', path: 'need', component: Need }, { name: 'find', path: 'find', component: Find }, { name: 'mine', path: 'mine', component: Mine } ] }, { name: 'search', path: '/search', component: Search }, { name: 'position', path: '/position', component: Position0 }, { name: 'publish', path: '/publish', component: Publish }, { name: 'success', path: '/success', component: Success }, { name: 'listall', path: '/listall', component: Listall }, { name: 'listone', path: '/listone', component: Listone }, { name: 'listchange', path: '/listchange', component: Listchange }, { name: 'map', path: '/map', component: Map } ] const router = new VueRouter({

 //此處設置mode爲history，即不帶#號，在處理數據的時候會更方便一些

 mode: 'history',

 //ES6的寫法，即routes：routes的簡寫，當key和value名字同樣時，可簡寫
 routes }) 
//把你建立的路由暴露出去，使得main.js能夠將其引入並使用
 export default router

　　　　引伸1：

　　　　路由有一個meta屬性

　　　　能夠給該路由掛載一些信息

　　　　設置一些本身title、顯示隱藏、左右滑動的方向之類的

meta: { title: "HelloWorld", 要現實的title show: true 設置導航隱藏顯示 }

　　　　使用的時候：this.$route.meta.show

　　　　<Bottom v-show="this.$route.meta.show"></Bottom>

　　　　引伸2:

　　　　動態路由

{ path:"/two/:id", component:Two, }

　　　　獲取數據this.$route.params.動態路由的名字

　　　　此處是:this.$route.params.id

　　　　引伸3:

　　　　路由別名alias

{ path: '/a', component: A, alias: '/b' }
//　　/a 的別名是 /b
//意味着，當用戶訪問 /b 時，URL 會保持爲 /b，可是路由匹配則爲 /a
//就像用戶訪問 /a 同樣
//簡單的說就是給 /a 起了一個外號叫作 /b ,可是本質上仍是 /a

二、react-router @4用法

　　a、大概目錄

　　不須要像vue那樣麻煩的用到一個單獨的文件夾，react只須要在index.js中部分配置便可

　　b、準備工做

　　　 yarn add react-router-dom

　　　index.js中

　　　 import { BrowserRouter } from 'react-router-dom'

　　<App />

</BrowserRouter>

　　　這樣App內部組件均可以使用

　　c、使用

　　一樣是上面那個例子，寫法不同：

import React, { Component } from 'react'; import {Bar} from 'components/common/ibar' import ShopDetail from 'pages/shopDetail/shopDetail' import NodeDe from 'pages/noteDetail/NodeDe' import Car from 'pages/car/Car' import Admin from 'pages/admin/Admin' import Admin1 from 'pages/admin/Admin1' import GoodDetail from 'pages/goodDetail/goodDetail' import { Route, Switch, Redirect } from 'react-router-dom' class App extends Component { render() { return (

　　　 //這裏爲何要用Switch包裹呢？
　　　 //<Switch>是惟一的由於它僅僅只會渲染一個路徑
 <Switch>

　　　　 //Redirect表明重定向，若是加了exact表明精準匹配

        <Redirect exact from="/" to="/home"></Redirect>
        <Route path='/home' component={Bar}/>
        <Route path="/shopDetail/:shopId/:shopName/:shopNote/:shopPic" component={ShopDetail} />
        <Route path='/noteDetail/:noteId' component={NodeDe} />
        <Route path='/goodDetail/:goodId/:shopId' component={GoodDetail} />
        <Route path='/car' component={Car} />
        <Route path='/admin' component={Admin}/>
        <Route path='/admin1/:phone' component={Admin1}/>
      </Switch>
 ); } } export default App;

　　　　當點擊哪裏須要跳轉的時候，在標籤外面包一個<Link to= ' 路由路徑 ' ></Link>　　　　

　　　　動態路由/xxx/:xx，如上圖

　　　　引伸1:HashRouter和BrowserRouter

　　　　　　它們兩個是路由的基本，就像蓋房子必須有地基同樣

　　　　　　咱們須要將它們包裹在最外層，咱們只要選擇其一就能夠了。

　　　　　　如今講它們的不一樣：

　　　　　HashRouter

　　　　　若是你使用過react-router2或3或者vue-router

　　　　　你常常會發現一個現象就是url中會有個#，

例如localhost:3000/#

HashRouter就會出現這種狀況，它是經過hash值來對路由進行控制

若是你使用HashRouter，你的路由就會默認有這個#。

　　　　 BrowserRouter

不少狀況下咱們則不是這種狀況，咱們不須要這個#

　　　　　由於它看起來很怪，這時咱們就須要用到BrowserRouter。

　　　　引伸2：Link和NavLink的選擇

　　　　　　二者都是能夠控制路由跳轉的，不一樣點是NavLink的api更多，更加知足你的需求。

　　　　 Link：主要api是to，to能夠接受string或者一個object，來控制url

　　　　　 NavLink：它能夠爲當前選中的路由設置類名、樣式以及回調函數等。

　　　　引伸3:withRouter高階組件

//引入withRouter
import {
    Link,
    withRouter
} from 'react-router-dom'

//代碼結尾暴露的時候，把要暴露的組件包裹在withRouter中，作成一個高階組件，
//將react-router 的 history,location,match 三個對象傳入
//將組件包一層withRouter，就能夠拿到須要的路由信息
//獲取路由信息的時候this.props.location

withRouter(GoodDetail) withRouter(connect(mapState, mapDispatch)(GoodDetail))

三、什麼是包容性路由？什麼是排他性路由？

　　包容性路由：

　　　　若是路由有/food 和 /food/1 那麼在匹配 /food 的時候兩個都能匹配到

　　　　react就是典型的包容性路由

　　　　因此react須要引入Switch標籤，把路由變成排他性的

　　排他性路由：

　　　　只要匹配成功一個就不會往下面進行匹配了

　　　　vue是排他性路由

　　　　匹配從上到下，匹配到一個即止

四、react路由有兩個重要的屬性：children和render，這兩個有什麼區別？

　　a、Route 能夠寫行間render，render={()=>{return }}

　　b、也能夠寫行間children={()={return }}

　　c、無論匹配與否children都執行

　　d、render優先級比children高

五、react如何在路由裏面定義一個子路由？

　　a、引入在須要子路由的頁面引入Route標籤　　

　　　<Route path='/noteDetail/home' component={NodeDe} />

　　b、舉個🌰(糖炒栗子，個人愛，爲何我本身作的🌰都那麼難吃？？？)

　　　　咱們在home頁面裏(左邊一溜的父組件)該點擊的地方

export const Home = () => ( <ul>
    <li>
      <NavLink to='/home' exact activeStyle ={selectedStyle}>首頁</NavLink>
    </li>
    <li>
      <NavLink to='/about' activeStyle ={selectedStyle}>關於咱們</NavLink>
    </li>
    <li>
      <NavLink to='/event' activeStyle ={selectedStyle}>企業事件</NavLink>
    </li>
    <li>
      <NavLink to='/product' activeStyle ={selectedStyle}>公司產品</NavLink>
    </li>
    <li>
      <NavLink to='/us' activeStyle ={selectedStyle}>聯繫咱們</NavLink>
    </li>
  </ul>
)

　　　　咱們在home頁面裏(左邊一溜的父組件)設置內容應該不一樣的地方

<Redirect exact from="/" to="/home"></Redirect>
      <Route path='/home' exact component={Home}/>
      <Route path='/about' component={About}/>
      <Route path='/event' component={Event}/>
      <Route path='/product' component={Product}/>    
      <Route path='/us' component={Us}/>

　　　　咱們在關於咱們頁面該點擊的地方

export const AboutMenu = () => ( <ul className="about-menu">
    <li>
      <NavLink to='/about' exact activeStyle ={selectedStyle}>公司簡介</NavLink>
    </li>
    <li>
      <NavLink to='/about/history' activeStyle ={selectedStyle}>公司歷史</NavLink>
    </li>
    <li>
      <NavLink to='/about/services' activeStyle ={selectedStyle}>公司服務</NavLink>
    </li>
    <li>
      <NavLink to='/about/location' activeStyle ={selectedStyle}>企業位置</NavLink>
    </li>
  </ul>
)

　　　　咱們在關於咱們頁面該實現內容不一樣的地方

<Route path='/about' exact component={Company}/>
      <Route path='/about/history' component={History}/>
      <Route path='/about/services' component={Services}/>
      <Route path='/about/location' component={Location}/>

　　　　由此便實現了react子路由

六、vue如何在路由裏面定義一個子路由？

　　給父路由加一個 children:[]

　　參考個人<1.d>的代碼

const routes = [ { 　　　　 //path是路由的路徑
 path:'/', 　　　　 //redirect表明重定向，由於當前路徑'/'並無對應的組件，因此須要重定向到其餘路由頁面
　　　　 redirect:'/ho' }, { path: '/ho', redirect:'/ho/home', 　　　　 //當不須要重定向的時候，須要component寫上當前路由對應的組件頁面
 component: Home, 　　　　 //有些路由還有子路由，須要用到children[],
　　　　 //當訪問的時候，<router-link>的屬性to的時候要把全部的父組件都帶上
　　　　 //如:此處的/ho/home/like
 children: [

　　　　　　//子路由寫在children數組裏，仍舊以對象的形式

 { name: 'home', path: 'home', component: Home1, redirect:'/ho/home/like', children :[ { name: 'like', path: 'like', component: Like }, { name: '2000001', path: '2000001', component: S1 }, { name: '2000022', path: '2000022', component: S2 } ] }, { name: 'type', path: 'type', component: Type }, { name: 'need', path: 'need', component: Need }, { name: 'find', path: 'find', component: Find }, { name: 'mine', path: 'mine', component: Mine } ] }, { name: 'search', path: '/search', component: Search }, { name: 'position', path: '/position', component: Position0 }, { name: 'publish', path: '/publish', component: Publish }, { name: 'success', path: '/success', component: Success }, { name: 'listall', path: '/listall', component: Listall }, { name: 'listone', path: '/listone', component: Listone }, { name: 'listchange', path: '/listchange', component: Listchange }, { name: 'map', path: '/map', component: Map } ] const router = new VueRouter({ //此處設置mode爲history，即不帶#號，在處理數據的時候會更方便一些
    mode: 'history', //ES6的寫法，即routes：routes的簡寫，當key和value名字同樣時，可簡寫
 routes }) //把你建立的路由暴露出去，使得main.js能夠將其引入並使用
 export default router

七、react怎麼經過路由傳參？

　　a、通配符傳參(刷新頁面數據不丟失)

//在定義路由的時候

<Route path='/path/:本身起個名字' component={Path}/>


//在路由點擊跳轉的時候

<Link to="/path/你要傳的參數">通配符</Link>


//另外一個頁面接收傳來的參數

this.props.match.params.你起的名字

　　舉個🌰

　　　另外一個頁面接收值的時候：

　　　　　　　　this.props.match.params.id

　　b、query傳參(刷新頁面數據丟失)

//路由定義

<Route path='/query' component={Query}/>

//跳轉的時候
var query = { pathname: '/query', query: '我是經過query傳值 ' } <Link to={query}>query</Link>

//另外一個頁面使用的時候

this.props.location.query 這裏的this.props.location.query === '我是經過query傳值'

　　c、state傳參(刷新頁面數據丟失，同query差很少，只是屬性不同，並且state傳的參數是加密的，query傳的參數是公開的)

//Route定義

<Link to={state}>state</Link>

//使用的時候

    var state = { pathname: '/state', state: '我是經過state傳值' } <Route path='/state' component={State}/>

//另外一個頁面獲取值的時候

this.props.location.state 這裏的this.props.location.state === '我是經過query傳值'

　　d、路由？傳參數

　　　此處的foodmenu經過路由？後面傳參數

　　　在另外一個頁面的this.props.location.search能夠獲取到 "?id=6"

八、vue怎麼經過路由傳參？

　　a、通配符傳參數

//在定義路由的時候
 { path: '/describe/:id', name: 'Describe', component: Describe } //在使用的時候

this.$router.push({ path: `/describe/${id}`, }) //接收頁面獲取值

this.$route.params.id

　　b、params傳參，跳轉的時候不會顯示在url上

//在定義路由的時候
 { path: '/describe', name: 'Describe', component: Describe } //在使用的時候

this.$router.push({ name: 'Describe', params: { id: id } }) //接收頁面獲取值

this.$route.params.id

　　c、query傳參，傳餐的時候在url顯示? key=value & key=value

//在定義路由的時候
 { path: '/describe', name: 'Describe', component: Describe } //在使用的時候

 this.$router.push({ path: '/describe', query: { id: id } }) //接收頁面獲取值
this.$route.query.id

九、怎麼在react裏拿到router對象？

　　import withRouter 而且 export組件的時候，用withRouter把組件包起來

//引入withRouter
import { Link, withRouter } from 'react-router-dom'

//代碼結尾暴露的時候，把要暴露的組件包裹在withRouter中，作成一個高階組件， //將react-router 的 history,location,match 三個對象傳入 //將組件包一層withRouter，就能夠拿到須要的路由信息 //獲取路由信息的時候this.props.location
withRouter(GoodDetail) withRouter(connect(mapState, mapDispatch)(GoodDetail))

十、怎麼在vue裏拿到router對象？　

//在使用的時候

 this.$router.push({ path: '/describe', query: { id: id } }) //接收頁面獲取值
this.$route.query.id

十一、路由怎麼回退？

　　a、vue：this.$router.back(-1)

　　b、react：this.props.history.goback()

十二、react路由守衛？

　　a、在以前的版本中，React Router 也提供了相似的 onEnter 鉤子，但在 React Router 4.0 版本中，取消了這個方法。

　　b、那麼在react中若是咱們也須要路由守衛怎麼辦？好比在跳轉路由前須要判斷用戶是否登陸？若是登陸才能夠進行跳轉，不然沒有權限

　　c、

//下面是個人實現方式， //首先，準備一份路由表， //包含了路由的地址，組件以及是否須要權限校驗：
 import { HomePage } from '../pages/home/home.page'; import { LoginPage } from '../pages/login/login.page'; import { ErrorPage } from '../pages/error/error.page'; interface routerConfigModel { path:string, component?:any, auth?:boolean } export const routerConfig:routerConfigModel[] = [ { path:'/', component:HomePage, auth:true, }, { path:'/home', component:HomePage, auth:true, }, { path:'/login', component:LoginPage, }, { path:'/404', component:ErrorPage } ]; //將 auth 設置爲 true，表示該路由須要權限校驗。 //而後，定義 Router 組件，該組件是通過高階組件包裝後的結果：
 import * as React from 'react'; import { HashRouter,Switch } from 'react-router-dom'; import { FrontendAuth } from '../components/frontend-auth/frontend-auth.component' import { routerConfig } from './router.config' export class Router extends React.Component{ render(){ return( <HashRouter>
                <Switch>
                    <FrontendAuth config={routerConfig} />
                </Switch>
            </HashRouter>
 ); } } //全部的路由跳轉，都交給 FrontendAuth 高階組件代理完成。 //下面是 FrontendAuth 組件的實現：
 import * as React from 'react'; import { Route,Redirect } from 'react-router-dom'; import { propsModel } from './frontend-auth.model' export class FrontendAuth extends React.Component<any,propsModel>{ render(){ const { location,config } = this.props; const { pathname } = location; const isLogin = localStorage.getItem('__config_center_token') // 若是該路由不用進行權限校驗，登陸狀態下登錄頁除外
        // 由於登錄後，沒法跳轉到登錄頁
        // 這部分代碼，是爲了在非登錄狀態下，訪問不須要權限校驗的路由
 const targetRouterConfig = config.find((v:any) => v.path === pathname); if(targetRouterConfig && !targetRouterConfig.auth && !isLogin){ const { component } = targetRouterConfig; return <Route exact path={pathname} component={component} />
 } if(isLogin){ // 若是是登錄狀態，想要跳轉到登錄，重定向到主頁
            if(pathname === '/login'){ return <Redirect to='/' />
            }else{ // 若是路由合法，就跳轉到相應的路由
                if(targetRouterConfig){ return <Route path={pathname} component={targetRouterConfig.component} />
                }else{ // 若是路由不合法，重定向到 404 頁面
                    return <Redirect to='/404' />
 } } }else{ // 非登錄狀態下，當路由合法時且須要權限校驗時，跳轉到登錄頁面，要求登錄
            if(targetRouterConfig && targetRouterConfig.auth){ return <Redirect to='/login' />
            }else{ // 非登錄狀態下，路由不合法時，重定向至 404
                return <Redirect to='/404' />
 } } } } //以及對應的 Model：
 export interface propsModel { config:any[], } //頁面上的路由跳轉，都由 FrontendAuth 高階組件代理了， //在 Switch 組件內部，再也不是 Route 組件， //而只有一個 FrontendAuth 組件。


//FrontendAuth 組件接收一個名爲 config 的 Props，這是一份路由表。 //同時，因爲 FrontendAuth 組件放在了 Switch 組件內部，React Router 還自動爲 FrontendAuth 注入了 location 屬性， //當地址欄的路由發生變化時，就會觸發 location 屬性對象上的 pathname 屬性發生變化， //從而觸發 FrontendAuth 的更新（調用 render 函數）。

//FrontendAuth 的 render 函數中， //根據 pathname 查找到路由表中的相關配置， //若是該配置中指定了無需校驗，就直接返回相應的 Route 組件。 //若是查找到的配置須要進行校驗，再根據是否登錄進行處理，具體能夠查看代碼中的註釋。
 總結一下，實現路由守衛須要考慮到如下的問題： 未登陸狀況下，訪問不須要權限校驗的合法頁面：容許訪問 登錄狀況下，訪問登錄頁面：禁止訪問，跳轉至主頁 登錄狀況下，訪問除登錄頁之外的合法頁面：容許訪問 登錄狀況下，訪問全部的非法頁面：禁止訪問，跳轉至 404 未登陸狀況下，訪問須要權限校驗的頁面：禁止訪問，跳轉至登錄頁 未登陸狀況下，訪問全部的非法頁面：禁止訪問，跳轉至 404

1三、vue路由守衛

　　a、beforeEach

　　全局守衛

(每一個路由調用前都會觸發，根據from和to來判斷是哪一個路由觸發)

const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { // ...
}) //每一個守衛功能都有三個參數： //to: Route：導航到的目標Route對象 //from: Route：當前路線被導航離開 //next: Function：必須調用此函數來解析鉤子 // next()：繼續前進到管道中的下一個鉤子。若是沒有留下掛鉤，則確認導航。

// next(false)：停止當前導航。若是瀏覽器URL已更改（由用戶手動或經過後退按鈕），則會將其重置爲from路徑的URL 。

// next('/')或next({ path: '/' })：重定向到其餘位置。當前導航將停止，並將啓動一個新導航。你能夠經過任何位置對象next，它容許您指定相似的選項replace: true，name: 'home'在使用任何選項router-link的to道具或router.push

// next(error)：（2.4.0+）若是傳遞給的參數next是一個實例Error，導航將被停止，錯誤將傳遞給經過註冊的回調router.onError()。
 `

　　　　舉個🌰

import Vue from 'vue'; import Router from 'vue-router'; import LoginPage from '@/pages/login'; import HomePage from '@/pages/home'; import GoodsListPage from '@/pages/good-list'; import GoodsDetailPage from '@/pages/good-detail'; import CartPage from '@/pages/cart'; import ProfilePage from '@/pages/profile'; Vue.use(Router) const router = new Router({ routes: [ { path: '/',  // 默認進入路由
      redirect: '/home'   //重定向
 }, { path: '/login', name: 'login', component: LoginPage }, { path: '/home', name: 'home', component: HomePage }, { path: '/good-list', name: 'good-list', component: GoodsListPage }, { path: '/good-detail', name: 'good-detail', component: GoodsDetailPage }, { path: '/cart', name: 'cart', component: CartPage }, { path: '/profile', name: 'profile', component: ProfilePage }, { path: '**',   // 錯誤路由
      redirect: '/home'   //重定向
 }, ] }); // 全局路由守衛
router.beforeEach((to, from, next) => { console.log('navigation-guards'); // to: Route: 即將要進入的目標 路由對象
  // from: Route: 當前導航正要離開的路由
  // next: Function: 必定要調用該方法來 resolve 這個鉤子。執行效果依賴 next 方法的調用參數。
 const nextRoute = ['home', 'good-list', 'good-detail', 'cart', 'profile']; let isLogin = global.isLogin;  // 是否登陸
  // 未登陸狀態；當路由到nextRoute指定頁時，跳轉至login
  if (nextRoute.indexOf(to.name) >= 0) { if (!isLogin) { console.log('what fuck'); router.push({ name: 'login' }) } } // 已登陸狀態；當路由到login時，跳轉至home 
  if (to.name === 'login') { if (isLogin) { router.push({ name: 'home' }); } } next(); }); export default router;

　　b、beforeResolve(2.5.0新增)

　　全局解析守衛

和相似，區別是在導航被確認以前，同時在全部組件內守衛和異步路由組件被解析以後，解析守衛就被調用router.beforeEach

　　c、afterEach

　　全局後置鉤子

router.afterEach((to, from) => { // ...
}) //不會接受next函數也 //也不會改變導航自己

　　d、beforeEnter　　

　　路由獨享的守衛

const router = new VueRouter({ routes: [ { path: '/foo', component: Foo, beforeEnter: (to, from, next) => { // ...
 } } ] }) //與全局前置守衛的方法參數是同樣的

　　e、

組件內的守衛

beforeRouteEnter
beforeRouteUpdate （2.2新增）
beforeRouteLeave

const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    // 在渲染該組件的對應路由被 confirm 前調用
    // 不！能！獲取組件實例 `this`
    // 由於當守衛執行前，組件實例還沒被建立
  },
  beforeRouteUpdate (to, from, next) {
    // 在當前路由改變，可是該組件被複用時調用
    // 舉例來講，對於一個帶有動態參數的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉的時候，
    // 因爲會渲染一樣的 Foo 組件，所以組件實例會被複用。而這個鉤子就會在這個狀況下被調用。
    // 能夠訪問組件實例 `this`
  },

　　//離開守衛一般用來禁止用戶在還未保存修改前忽然離開。導航該能夠經過來取消

  beforeRouteLeave (to, from, next) {
    // 導航離開該組件的對應路由時調用
    // 能夠訪問組件實例 `this`
  }
}next(false)

//beforeRouteEnter守衛不能訪問this， //由於守衛在導航確認前被調用，所以即將登場的新組件還沒被建立。

//不過，能夠你傳經過一個回調給next來訪問組件實例。 //在導航被確認的時候執行回調，而且把組件實例做爲回調方法的參數。
 beforeRouteEnter (to, from, next) { next(vm => { // 經過 `vm` 訪問組件實例
 }) }