Vue-router的使用

何小幸
90 阅读2分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第4天

使用router
  1. 安装vue-router：npm install vue-router --save
  2. 导入路由对象，并调用Vue.use(VueRouter)
  3. 创建路由实例，并且传入路由映射配置
  4. 在Vue实例中挂载创建的路由实例
  5. 创建需要路由的组件
  6. 配置路由映射（组件和路径）关系
  7. 通过<router-link>和<router-view>使用路由，router-link标签以a标签的形式呈现在页面中，标签内属性to传入对应的相对路径，router-view则是负责显示对应组件的标签

在配置router中组件的path时，可定义redirect进行重定向，类似于电话转接

在新建router实例时，可传入mode: 'history'来实现切换为history模式改变url

router-link的其他属性
  • tag：指定router-link显示时的标签
  • replace：不用指定值，让router-link点击时，路由方式为history的replace方法，这样可以让用户不能点击返回按钮返回上一个组件展示
  • active-class：更改选中组件的类名，想多个属性统一改时，可在router配置时，传入linkActiveClass值
代码方式实现跳转
//组件的methods中，通过$router对象加入url
this.$router.push()
this.$router.replace()
动态路由

在某些情况下，一个页面的path路径可能是不确定的，比如进入用户界面时，常会显示如下路径

/user/aaaa
/user/bbbb

这种path和component的匹配关系，我们称之为动态路由

实现思路：在组件data中定义用户名属性，通过v-bind绑定router-link的to属性，就可以使用字符串拼接将用户名拼接至url后面

注意配置路径时的写法，加冒号表示动态路由，不会被当作字符串处理：

//router/index.js
{
    path: '/user/:userid'
    component: User
}

<router-link :to="'/user/'+userid">用户</router-link>

分清router和router和route： router是大的router对象，router是大的router对象，route是当前活跃的路由对象，$route通过其params属性可以获取当时通过冒号绑定的属性

$route.params.userid
路由懒加载

对不同模块进行分离打包，避免用户进入网页时，一次性传输全部js文件导致卡顿

//./router/index.js
const Home = () => import('../components/Home')
const About = () => import('../component/Aabout')
嵌套路由

例如当路径/Home对应一个组件时，我们要再通过/Home/news以及/Home/messages来访问内容

实现步骤：

  1. 创建对应的子组件，并且在路由映射中配置对应的子路径（在/Home路径配置对象中用children属性以对象数组的形式配置子路径，注意这里path中开头不能加斜杠）
  2. 在组件内部使用router-view标签，这里router-link的to属性要写完整路径
路由参数传递

两种方式：params和query

params：

  • 配置路由格式：/router/:id
  • 传递方式：在path后面跟上对应的值
  • 传递后形成的路径：/router/123
//Vue.js
<router-link :to="'/User/' + userId + '/albums'">相册</router-link>
​
//router/index.js
{
          path: '/User/:userId/albums',
          component: albums
        }
//传过去的userId在子组件中可以通过$route.params.userId来获取

query：

  • 配置路由格式：/router，和普通配置一样
  • 传递的方式：对象中使用query的key作为传递方式
  • 传递后形成的路径：/router?id=123, /router?id=abc
//在router-link的to的传入query属性
<router-link :to="{path:'/profile', query: {name: 'why', age: 18}}"
//传递过来的参数可以通过$route.query.paramName来获取

query方法在执行push方法时，传入query对象能起到同样的效果：

$router.push({
    path: '/profile',
    query: {
        name: 'why',
        age: 18,
        height: 1.88
    }
})
导航守卫

beforeEnter、afterEnter是vue-router提供的两个钩子函数，他们会在路由即将发生改变时或改变后触发

案例需求：为每个路由组件添加对应的title，若用生命周期方法添加，则每个页面都要更改，很麻烦。

简单理解：beforeEnter方法的参数需传入一个方法，方法包含to，from，next三个参数，from表示当前的route路由对象，to表示下一步跳转的route路由对象，next为执行下一个路由的方法

可在路由对象中，加入元数据：

meta: {
    title: ''
}

这样再去beforeEnte中操作dom，改变title：

//router/index.js
router.beforeEnte((to, from, next) => {
    document.title = to.matched[0].meta.title
    //上面直接通过to.name也可获得
    next()
})

afterEnter与beforeEnter类似，不同点有：

  • 不需要主动调用next()函数，只有from和to两个参数

在路由配置中定义守卫，则是其路由独享的守卫，使用router调用的守卫为全局路由的守卫

avatar
文章
阅读
粉丝