js实现vue路由

Vue路由基础实现

使用Vue Router实现前端路由需要先安装并配置路由库。Vue Router是Vue.js官方的路由管理器。

安装Vue Router：

npm install vue-router

创建路由实例：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

const router = new VueRouter({
  routes
})

export default router

路由视图与导航

在主应用中注入路由：

import Vue from 'vue'
import App from './App.vue'
import router from './router'

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

在App.vue中添加路由视图：

<template>
  <div id="app">
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-view></router-view>
  </div>
</template>

动态路由匹配

可以通过冒号标记路径参数实现动态路由：

const routes = [
  { path: '/user/:id', component: User }
]

在组件中访问路由参数：

this.$route.params.id

嵌套路由

使用children属性实现嵌套路由：

const routes = [
  {
    path: '/user',
    component: User,
    children: [
      { path: 'profile', component: Profile },
      { path: 'posts', component: Posts }
    ]
  }
]

父路由组件需要包含<router-view>：

<div class="user">
  <h2>User</h2>
  <router-view></router-view>
</div>

编程式导航

除了<router-link>，也可以通过代码导航：

// 字符串路径
this.$router.push('/home')

// 对象
this.$router.push({ path: '/home' })

// 命名的路由
this.$router.push({ name: 'user', params: { userId: '123' } })

// 带查询参数
this.$router.push({ path: '/register', query: { plan: 'private' } })

路由守卫

实现导航控制：

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!auth.loggedIn()) {
      next({ path: '/login' })
    } else {
      next()
    }
  } else {
    next()
  }
})

路由懒加载

优化性能的路由懒加载实现：

const User = () => import('./views/User.vue')

const routes = [
  { path: '/user', component: User }
]

命名视图

单页面多路由视图配置：

const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        default: Home,
        sidebar: Sidebar
      }
    }
  ]
})

对应模板：

<router-view name="sidebar"></router-view>
<router-view></router-view>