测试派 Give testers a home.

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。

1、安装vue-router

• 方式一：使用npm安装

  • 安装命令：

    vue add router
    

• 方式二：直接全局的 script标签引入

  <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
  

2、vue-router的基本使用

# 1、定义路由对应的组件
const Login = {template: `<h1>登录页面</h1>`}
const Home =  {template: `<h1>项目首页</h1>`}

# 2、创建一个路由对象,设置路由匹配规则
const router = createRouter({
  history: createWebHashHistory(),
      routes:[
      { path: '/login', component: Login  },
      { path: '/home', component: Home }
    ]
})
# 3、将路由对象挂载到vue实例中
const app = Vue.createApp({})
app.use(router)
app.mount('#app')
# 4、#app中使用<router-view><\router-view>来定义路由展示位

3、编程式和声明式导航(页面跳转)

• 导航----->(页面跳转)

1、声明式

<router-link to="/login">登录</router-link>

// to后面是一个对象时，要使用属性绑定
<router-link :to="{ path: '/login'}">登录</router-link>

2、编程式

**在项目中我们有些时候需要主动去访问某个路由，比如登录成功之后，需要跳转到项目首页，那么 在 Vue 实例内部，你可以调用 **this.$router.push，主动访问某个路由。

this.$router.push('/login')

this.$router.push({path: '/login'})

4、路由重定向

• 通过redirect可以指定重定向的路由地址

const router = createRouter({
history: createWebHashHistory(),
  routes: [
    { path: '/index', redirect: '/login' }
 ]
})

5、命名路由

**你可以在创建 Router 实例的时候，在 **routes 配置中给某个路由设置名称。

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: '/user/login',
      name: 'user',
      component: User
    }
  ]
})

路由命名后可以直接通过name指定路由名访问

• 声明式

<router-link :to="{ name: 'login'}">登录</router-link>

• 编程式

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

6、路由嵌套

一个路由中嵌套多个子路由（一个页面中根据不同的情况显示不同的内容）

const Home = {
    template: `
    <div class="main">
        <div class="topMenu" style="height: 100px;background: #000000;">
            <router-link :to="{name:'pro'}">
            <button type="button">项目管理</button>
            </router-link>
            <router-link :to="{name:'inter'}">
            <button type="button">接口管理</button>
            </router-link>
            <router-link :to="{name:'env'}">
            <button type="button">环境管理</button>
            </router-link>
        </div>
        <div class="content">
        <router-view></router-view>
        </div>
    </div>
`
}
const Project = {
    template: `
    <div>
    <h1>项目页面</h1>
    </div>
`
}
const InterFace = {
    template: `
    <div>
    <h1>接口管理页面</h1>
    </div>
    `
    }
const Env = {
    template: `
    <div>
    <h1>项目环境页面</h1>
    </div>
    `
    }

const routes = [{
        path: '/',
        component: Home,
        name: 'home',
        children: [
            {path: '/project',component: Project,name: 'pro'},
            {path: '/interface',component: InterFace,name: 'inter'},
            {path: '/env',component: Env,name: 'env'}
        ]
    }]

访问嵌套路由的路径时，对应的组件会渲染在父路由预留的路由展示位中

7、路由动态匹配及参数

1、路径参数

**在项目中我们可能会需要把 **/user/111 和 /user/112 都将映射到同一个路由,那么此时我们只需要在配置路由的时候把user后面的数据参数化处理即可

• 动态路径匹配

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    // 动态路径参数 以冒号开头
    { path: '/user/:id', component: User },
    { path: '/user/:id/:key', component: User }   
  ]
})

• 参数传递

  this.$router.push({
      name: 'user',
      params: {
          id: 111,
          key:'login'
      }
  })
   //params传递的参数可以在路由对应的组件中通过 $route.params.参数 使用
  

2、查询参数query

查询参数类似于get请求的参数形式，/user/login/?user=123&pwd=23333

this.$router.push({
    name: 'user',
query:{
        user:123,
        pwd:23333
        }
})
//匹配到的参数可以在路由对应的组件中通过 $route.query.参数 使用

8、路由导航守卫

• 路由全局前置拦截器： router.beforeEach

router.beforeEach((to, from, next) => {
    // to:表示将要访问的路径
    // from 代表从哪个路径而来
    // next 是一个函数，表示执行下一步
    //判断是否访问的是登录页面
    if (to.path === '/login') return next()
    // 判断当前是否能获取到token
    if (window.sessionStorage.getItem('token')) return next()
    // 没有token，则跳转到登录页面
    return next('./login')
})

扩展

• 匹配优先级

  如果同一个路径可以匹配多个路由，此时，匹配的优先级就按照路由的定义顺序：谁先定义的，谁的优先级就最高。

• 匹配所有路由或 404 Not found 路由

  • 表示通配符，匹配所有的内容

  
    
  const router = createRouter({
  history: createWebHashHistory(),
  routes: [
      // 动态路径参数 以冒号开头
      { path: '/*', component: Page404 }
    ]
  })