Vue Router进阶学习

各位程序员1024节日快乐~

Vue Router 是 Vue.js 的官方路由管理器，它和 Vue.js 的核心深度集成，让构建单页面应用（SPA）变得简单。以下是 Vue Router 的基本用法

Vue Router 基本用法

安装 Vue Router

首先，你需要安装 Vue Router。如果你使用的是 npm，可以使用以下命令：

npm install vue-router

创建 Router 实例

在你的 Vue 应用中，你需要创建一个 Vue Router 实例，并定义路由。

// 导入 Vue 和 Vue Router
import Vue from 'vue'
import VueRouter from 'vue-router'

// 告诉 Vue 使用 Vue Router
Vue.use(VueRouter)

// 定义路由组件
const Home = { template: '<div>Home</div>' }
const About = { template: '<div>About</div>' }

// 创建路由配置
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

// 创建 router 实例
const router = new VueRouter({
  routes // （缩写）相当于 routes: routes
})

在 Vue 实例中使用 Router

将 router 实例传递给 Vue 实例。

const app = new Vue({
  router,
  template: `
    <div id="app">
      <h1>Hello, Vue Router!</h1>
      <ul>
        <li><router-link to="/">Home</router-link></li>
        <li><router-link to="/about">About</router-link></li>
      </ul>
      <router-view></router-view>
    </div>
  `
})

路由组件

路由组件是 Vue 组件，但它们是由 Vue Router 管理的。你可以在 <router-view> 元素中渲染路由组件。

路由参数

你可以在路由配置中定义参数：

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

然后在组件中通过 this.$route.params 访问参数：

export default {
  data() {
    return {
      user: null
    }
  },
  created() {
    this.user = this.$route.params.id
  }
}

路由导航

你可以使用 <router-link> 组件来创建导航链接，或者使用编程式导航：

<!-- 使用 <router-link> 创建导航链接 -->
<router-link to="/about">About</router-link>

// 编程式导航
this.$router.push('/about')

路由守卫

Vue Router 允许你在路由发生变化之前或之后执行逻辑，称为路由守卫。

const router = new VueRouter({
  routes,
  beforeEach: (to, from, next) => {
    // 在这里执行检查，然后调用 next()
    next()
  }
})

路由懒加载

为了减小应用的加载时间，你可以使用路由懒加载：

const router = new VueRouter({
  routes: [
    { path: '/foo', component: () => import('./Foo.vue') }
  ]
})

以上就是 Vue Router 的基本用法。

你可以在 Vue Router 官方文档 中找到更多高级用法和配置选项。