Vue Router 路由的安装和使用

骑猪看日落 2023-02-10 05:10 5阅读 0赞

### 文章目录 ###

*  路由（Router）的安装
 *  配置路由
 *  引用组件
 *  动态路由
 *  
 *  历史模式
 *  完全匹配
 *  包含匹配
 *  重定向
 *  导航守卫（钩子函数）
 *   *  全局守卫
     *   *  beforeEach
         *  beforeResolve
         *  afterEach
     *  路由独享守卫
     *   *  beforeEnter
     *  组件守卫
     *   *  beforeRouteEnter
         *  beforeRouteUpdate
         *  beforeRouteLeave
     *  导航守卫解析流程

# 路由（Router）的安装 #

在项目的根目录中输入下面的命令安装`Router`路由，会让我们选择模式，我们输入`n`选择哈希模式即可。

`vue add router`

在项目中生成`router`和`views`文件夹时代表安装成功，`router`文件夹下的`index.js`是用于配置路由，`views`文件夹上存放的是页面组件。

# 配置路由 #

在`vue`创建的默认项目中，已经为我们配置了默认的`home`和`about`组件，我们新建一个组件`Index.vue`来进行配置。

<template>
        <div>
            <h1>this is my create pages</h1>
        </div>
    </template>

我们在`routes`中配置`index.vue`的组件

const routes = [{ 
            path: '/',
            name: 'Home',
            component: Home
        },
        { 
            path: '/about',
            name: 'About',
            component: () => import ('../views/About.vue')
        },
        { 
            path: '/index',
            name: 'index',
            component: () => import ('../views/Index.vue')
        }
    ]

使用 `() => import('xxx.vue')` 路由懒加载可以更加高效。

# 引用组件 #

在我们的`App.vue`主页面中，我们通过`<router-link></router-link>`标签来进行引用组件

<template>
      <div id="app">
        <div id="nav">
          <router-link to="/">Home</router-link> |
          <router-link to="/about">About</router-link> | 
          <router-link tag="span" to="/index">Index</router-link>
        </div>
        <router-view/>
      </div>
    </template>

我们可以使用`tag`属性渲染成指定的标签，`to` 控制的是跳转的组件，我们还可以使用`name`和`path`来绑定，值为`./router/index.js`中路由配置的`name`和`path`参数。

<router-link :to="{name: 'About'}">About</router-link>
    <router-link :to="{path: '/index'}">Index</router-link>

# 动态路由 #

动态路由就是可以变化的参数，比如下面的`id`，并且这个页面的跳转需要用`name`来跳转，因为`path`是动态的。

<router-link :to="{name: 'about',params:{id:1}}">About</router-link>

{ 
        path: '/about/:id',
        name: 'about',
        component: () => import ('../views/About.vue')
    }

mounted(){ 
        console.log(this.$route.params.id);
      }

在实例被挂载后调用后可以获取路由传递过来的值。

#  #

# 历史模式 #

我们在点击组件的时候我们发现地址栏的地址存在符号 `#`，如果不想要这个符号，我们可以将路由配置为历史模式。

const router = new VueRouter({ 
        mode: "history", // 配置为历史模式
        routes
    })

# 完全匹配 #

在路由中，当我们的地址与组件完全匹配的时候会添加一个`class`属性`router-link-exact-active`，我们可以给这个`class`属性添加一些样式。

.router-link-exact-active { 
      color: #42b983;
    }

# 包含匹配 #

在路由中，地址包含了当前组件的地址是，会添加一个`class`属性`router-link-active`，同样也可以添加一些样式。

.router-link-active { 
      color: #42b983;
    }

**`router-link-exact-active` 和 `router-link-active` 的属性名可能会太过于长，我们可以重新配置下名字**

const router = new VueRouter({ 
        mode: "history", // 设置为历史模式
        linkExactActiveClass: "active-exact", //配置完全匹配的class名字
        linkActiveClass: "active", //配置包含匹配的class名字
        routes
    })

配置完成后我们就可以使用`active-exact`和`active`来代替他们使用。

# 重定向 #

当进入指定路由后跳转到指定路由界面。

const routes = [{ 
            path: '/',
            redirect: './Home',
        }, { 
            path: '/Home',
            name: 'Home',
            component: Home
        }
    ]

# 导航守卫（钩子函数） #

## 全局守卫 ##

### beforeEach ###

当导航触发时调用。

router.beforeEach( (to,from,next) => { 
    	// ...body
    } )

### beforeResolve ###

在所有的组件内守卫解析后执行。

router.beforeResolve( (to,from,next) => { 
    	// ...body
    } )

### afterEach ###

在beforeResolve之后调用，次钩子函数没有next。

router.afterEach( (to,from) => { 
    	// ...body
    } )

## 路由独享守卫 ##

### beforeEnter ###

在路由组件创建后触发。

routes : [
      { 
        path: '/home',   //跳转的路径
        name: 'home',   //组件的名称
        component: Home,   //加载的组件
        beforeEnter (to,from,next){    //路由独享守卫
          // ...body
        }
      }
    ]

## 组件守卫 ##

### beforeRouteEnter ###

解析时调用，此时组件还没有被创建，所以不能使用this。

export default{ 
    	beforeRouteEnter(to,from,next){ 
    		// ...body
    	}
    }

### beforeRouteUpdate ###

组件是不会重新加载，路由改变的时候，组件被重新渲染。

export default{ 
    	beforeRouteUpdate(to,from,next){ 
    		// ...body
    	}
    }

### beforeRouteLeave ###

离开对应路由时触发，通常用于用户未保存后突然离开，可以通过next(false)来取消。

export default{ 
    	beforeRouteLeave(to,from,next){ 
    		// ...body
    	}
    }

*  **to ：即将要进入的目标路由对象**
 *  **from ：当前导航正要离开的路由**
 *  **next : 管道，一定要调用此方法来resolve这个钩子**
    
     *  **next() 继续下面的钩子函数**
     *  **next(false) 取消当前的导航**
     *  **next("/") 或者 next(\{ path : “/” \}) 跳转到一个不同的地址**

## 导航守卫解析流程 ##

解析

解析完成

beforeEach 全局守卫

beforeEnter 路由独享守卫

beforeRouteEnter 组件内守卫

beforeResolve 全局守卫

afterEach 全局守卫

DOM更新后

beforeRouteUpdate 组件内守卫

beforeRouteLeave 组件内守卫