Vue Router 新手指南

时间：2020-03-29 15:01:12 阅读：53 评论：0 收藏：0 [点我收藏+]

本文将简要讲解一些在 vue-cli 环境下 vue-router 常用的 api 适合新手围观，篇幅有限，更多内容请参考 vue 的官网

当我们在 vue-cli 环境下引入 vue-router 之后，可以在 router 文件夹下看到index.js内部关于 vue-router 的详细配置

import Vue from ‘vue‘
import VueRouter from ‘vue-router‘

Vue.use(VueRouter) //这行代码如果注释掉，this上面都不存在$router与$route的api了

// 1.引入组件
import Home from ‘./views/Home.vue‘
import About from ‘./views/About‘ // .vue 可以省略

// 2.配置路由
const routes = [
    //重定向
    {
        path: ‘/‘,// 默认 重定向到 /Home
        redirect:"/Home", 
    },
    {
        path: ‘/About‘,//地址
        component: About, //组件名
      },
    {
        path: ‘/Home‘,//地址
        component: Home, //组件名
      },
    //重定向
    {
        path: ‘*‘,
        redirect:"/Home", 
        // 当访问的路径不是 /About 也不是 /Home 的时候，就会默认重定向到 Home 页面
    },
]

// 3.生成路由实例
const router = new VueRouter({
  routes
})

// 4.暴露 router
export default router

同时，根实例中也会注入 router，目的是为了让所有的组件里都能通过this.$router、this.$route来使用路由的相关功能 api

new Vue({
  router,  //为了让路由组件可以访问到this.$route 和 this.$router相关的路由api属性或方法
  store,
  render: h => h(App)
}).$mount(‘#app‘)

通过使用 router-view 来指定路由切换的位置，使用 router-link 来创建切换的工具

<template>
  <div id="app">
    <nav>
      <ul>
        <!--router-link的跳转-声明式导航-->
        <router-link
          v-for="nav in navlist"
          :key="nav.id"
          :to="nav.path"
          tag="li"
          active-class="active"
        >{{nav.title}}</router-link>
      </ul>
    </nav>
    <!--路由容器 基于slot进行封装的  根据url路径显示不同的路由组件-->
    <router-view></router-view>
  </div>
</template>
<script>
    export default {
        data(){
            return {
                navlist:[
                    {id:1,title:"Home",path:"/Home"},
                    {id:2,title:"About",path:"/About"},
                ]
            }
        }
    }
</script>
<style lang="scss" scoped>
    .active{
        color:orange; /* active-class="active" => 当前点击的li会变成橙色 */
      }
</style>

嵌套的 vue-router 当我们访问的路径是一级路由和二级路由的层级关系的时候，我们就可以再加上一个属性名为 children 的数组，数组里面的写法与外面一致。当然别忘记引入你的二级路由的组件

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

import Home from ‘./views/Home.vue‘
import About from ‘./views/About‘ 
// 1.引入二级路由的组件
import Second from ‘./views/Second‘ 

const routes = [
    {
        path: ‘/About‘,
        component: About, 
      },
    {
        path: ‘/Home‘,
        component: Home,
        children:[ // 2.二级路由的配置
          {
            path: ‘/Home/Second‘, // 地址
            component: Second, // 组件名
          },
        ]
      },
    {
        path: ‘*‘,
        redirect:"/Home", 
    },
]

const router = new VueRouter({
  routes
})

export default router

路由的两种实例方法

router.push(‘/About/‘+id)：直接添加一个路由，表现为切换路由，往历史记录里面添加一个历史记录
router.replace(‘/About/‘+id)：替换路由，历史记录里面没有添加记录

比如我们在 Second.vue 里面配置

<template>
    <div class="Second">
        <p>二级路由-------</p>
        <ul>
            <li
                v-for="data in datalist"
                :key="data"
                @click="toAbout(data)"
            >{{data}}</li>
        </ul>
    </div>
</template>
<script>
export default {
    data(){
        return {
            datalist:[111,222,333]//商品列表
        }
    },
    methods: {
        toAbout(id){
            // 点击111跳转 About 页面，可以后退上一页，返回 Home
            this.$router.push(‘/About/‘+id)
            
            // 点击111跳转 About 页面，无法后退上一页
            // this.$router.replace(‘/About/‘+id)
        }
    },
}
</script>

配置路由模式
- hash 模式（默认）:使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。（在当前页面的 url 后面加上路径）
```
// 3.生成路由实例
const router = new VueRouter({
  mode: ‘hash‘,// 默认模式
  routes
})
```
- history 模式: 通过history 完成 URL 跳转。（当前目录底下的路径跳转）
```
// 3.生成路由实例
const router = new VueRouter({
  mode: ‘history‘,// 跳转页面
  routes
})
```
路由懒加载 当打包构建应用时，Javascript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。
```
const routes = [
    {
    path: ‘/About‘,//地址
    component:()=>import(‘./views/About‘), 
    //es5语法
    // component: resolve => require([‘./views/About‘], resolve)
  },
]
```
- 注意：采用懒加载就不需要引入 import About from ‘@/views/About‘

router-link 的属性

to ：相当于a 的标签用 href 属性，来指定导航的目标地址。导航的目标地址的几种写法

字符串表示

<router-link to=‘Home‘>Home</router-link>

v-bind 绑定属性

<router-link :to=‘Home‘>Home</router-link>

对象表示

<router-link :to="{path:‘Home‘}">Home</router-link>

命名的路由

<router-link :to="{name:‘Home‘,params:{home:123}}">Home</router-link>

带查询参数，下面的结果为/Home?plan=private

<router-link :to="{path: ‘Home‘, query: { plan: ‘private‘ }}">Home</router-link>

设置 tag 就会把 <router-link> 渲染成某种标签

<router-link to="/foo" tag="li">foo</router-link>
  <!-- 渲染结果 -->
<li class=‘router-link-exact-active router-link-active‘> foo </li>

配置路由守卫

全局路由钩子 既然是全局的路由拦截，就意味着必须在 router 文件夹下的 index.js 中配置

const router = new VueRouter({ ... }) // 此处省略号代表省略配置路由的内容

//进入到某个路由组件之前（全局前置守卫）
router.beforeEach((to, from, next) => {
    //会在任意路由跳转前执行，next一定要记着执行，不然路由不能跳转了
  console.log(‘beforeEach‘)
  console.log(to,from)
  next() // 一定要调用
})

//进入到某个路由组件之后（全局后置守卫）
router.afterEach((to, from) => {
    //会在任意路由跳转后执行
  console.log(‘afterEach‘) // 不接受 next() 也不会影响路由本身
})

单个路由钩子 又叫做路由独享的守卫，它直接在配置路由的时候进行拦截

const routes = [
    {
    path: ‘/About‘,//地址
    component:()=>import(‘./views/About‘), 
        
    // 单个钩子函数
    // 局部路由 单个路由拦截
    beforeEnter: (to, from, next) => {
      console.log(‘单个钩子函数----进入 About‘);
      next()
    }
  },
]

路由组件钩子 也就是组件内的路由拦截

<template>
  <div class="about">
    <h1>This is an about page</h1>
  </div>
</template>
<script>
export default {
  // 进入 About 之前
  beforeRouteEnter (to, from, next) {
    console.log(‘进入 About 之前-------beforeRouteEnter‘);
    console.log(this);// undefined
    next()
  },
  // 从 About 离开的时候 
  beforeRouteLeave (to, from, next) {
    console.log(‘从 About 离开的时候-------beforeRouteLeave‘);
    console.log(this); // VueComponent
    next()
  },
}
</script>

Vue Router 新手指南

原文：https://www.cnblogs.com/Welin/p/12592254.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)