vue route

vue-router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用（SPA）变得易如反掌。vue-router 通过简单的 API 实现 URL 的跳转和组件的映射，让你可以轻松构建带有多个视图的单页应用。

主要功能

• 嵌套路由：可以构建嵌套路由结构，表示应用的界面可以由多个嵌套的组件组成。
• 路由参数：每个路由都可以有自己的参数（类似于 URL 中的查询参数或动态片段），你可以在组件中访问这些参数。
• 编程式导航：可以使用 JavaScript 代码进行路由跳转，而不仅仅是声明式地通过 <router-link> 组件。
• 导航守卫：允许你在路由发生变化之前或之后执行自定义逻辑，比如权限校验、页面标题的修改等。
• HTML5 History 模式：利用 HTML5 History API 来实现 URL 跳转而无须重新加载页面。
• 路由懒加载：可以将路由对应的组件分割成代码块，当路由被访问时才加载对应的组件，这样可以提高应用的加载速度和性能。

基本用法

安装：首先，你需要在你的 Vue 项目中安装 vue-router。

npm install vue-router

定义路由：然后，定义你的路由，每个路由应该映射一个组件。 

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

Vue.use(Router)  

export default new Router({  
  routes: [  
    {  
      path: '/',  
      name: 'home',  
      component: Home  
    },  
    {  
      path: '/about',  
      name: 'about',  
      component: About  
    }  
  ]  
})

创建和挂载根实例：在 Vue 应用中创建和挂载根实例时，你需要将 router 配置传入。

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

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

 使用 <router-view>：在你的 Vue 组件中，使用 <router-view> 来告诉 vue-router 在哪里渲染对应的路由组件。

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

编程式导航：你也可以在 Vue 组件的方法中使用 this.$router.push 或 this.$router.replace 进行编程式导航。

methods: {  
  goHome() {  
    this.$router.push('/')  
  }  
}

 

注意事项

• 确保在 Vue 应用中使用 vue-router 时，Vue 和 vue-router 的版本兼容。
• 路由配置中的 path 应该是唯一的，以避免路由冲突。
• 在使用 HTML5 History 模式时，需要服务器支持，因为当直接访问非根 URL 时，服务器需要能够返回应用的入口文件（通常是 index.html）。
• 路由懒加载可以帮助减少应用的初始加载时间，特别是在大型应用中。