Vue Router和Vuex：Vue Router是Vue.js官方的路由管理器，Vuex是Vue.js的状态管理模式。它们都是构建大型单页面应用必不可少的工具

介绍Vue Router

Vue Router的基本概念

 

Vue Router是Vue.js的官方路由管理器。它和Vue.js核心深度集成，让构建单页面应用变得轻而易举。路由就是根据网址的不同，返回不同的内容给用户。

 

Vue Router的安装和使用

 

首先你需要通过npm安装vue-router：

npm install vue-router

 

然后在你的项目中引入vue和vue-router，创建一个router实例，并挂载到vue实例上：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

const router = new VueRouter({
  routes
})

const app = new Vue({
  router
}).$mount('#app')

 

Vue Router的基本配置：路由、嵌套路由、命名路由等

 

路由配置就是定义一些路由规则，每个路由应该对应一个组件。嵌套路由允许我们创建更复杂的路由结构。命名路由允许我们给某个路由规则添加一个名字，可以让路由更易于管理。

const routes = [
  { path: '/user/:id', component: User, children: [
    { path: 'profile', component: UserProfile },
    { path: 'posts', component: UserPosts }
  ] },
  { path: '/login', component: Login, name: 'login' }
]

 

Vue Router的导航：编程式导航、声明式导航

 

声明式导航就是使用<router-link>组件来定义导航链接。编程式导航就是通过编程的方式来控制导航，主要是router.push、router.replace、router.go这三个方法。

<router-link to="/foo">Go to Foo</router-link>

this.$router.push('/foo')