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 官方文档 中找到更多高级用法和配置选项。