Vue路由vue-router详细讲解指南

什么是Vue路由

Vue路由（vue-router）是Vue.js官方提供的客户端路由工具，它实现了基于组件的页面切换和参数传递。使用Vue路由可以实现单页应用（SPA，Single Page Application）的路由功能。

Vue路由可以通过切换地址栏中的url路径来加载组件并更新页面内容，同时可以传递参数，使得不同的组件可以根据参数的不同呈现不同的内容。

路由使用流程

使用vue-router步骤如下：

1. 安装vue-router：通过npm安装vue-router并在项目中引入

npm install vue-router

1. 引入vue-router：在Vue项目中引入vue-router，并且创建router实例

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

Vue.use(VueRouter)

const router = new VueRouter({
routes:[
//此处写路由对象
]
})
```

在VueRouter的构造函数中传入一个routes数组，routes数组中存放需要注册的路由对象。

1. 在Vue项目中使用vue-router：在Vue实例中引入router实例，并且使用路由组件。

javascript
new Vue({
el: '#app',
router,
render: h => h(App)
})

在Vue实例的el、router和render属性中，分别定义Vue实例的根元素、路由实例和渲染函数。

1. 创建路由组件并在路由对象中注册：创建需要用到的路由组件，并在VueRouter中注册路由对象

javascript
const router = new VueRouter({
routes:[
{
path:"/",
component:HomePage
},
{
path:"/user/:id",
component:UserPage
}
]
})

1. 创建路由链接和路由视图：

在需要显示路由内容的地方，添加标签，并且定义标签，用于显示路由组件。

```html

Home Page
User Page

```

在标签中的to属性中定义路由路径，标签用于显示路由组件。

实例说明

示例一

//创建路由组件
const HomePage = {
    template: '<div>Home Page</div>'
}

//创建路由对象并注册路由
const router = new VueRouter({
    routes:[
        {
            path:"/",
            component:HomePage
        }
    ]
})

//创建Vue实例并引入路由
new Vue({
    el: '#app',
    router,
    render: h => h(App)
})

在上述代码中，我们首先创建一个Home页面组件，然后在路由对象中注册Home页面组件，将这个路由对象引入到Vue实例中，最后在App.vue中，通过标签加载组件。

示例二

//创建路由组件
const UserPage = {
    template: '<div>User Page</div>'
}

//创建路由对象并注册路由
const router = new VueRouter({
    routes:[
        {
            path:"/user/:id",
            component:UserPage
        }
    ]
})

//创建Vue实例并引入路由
new Vue({
    el: '#app',
    router,
    render: h => h(App)
})

在上述代码中，我们首先创建一个User页面组件，然后在路由对象中注册User页面组件，并且定义了一个id参数作为User页面组件的参数，将这个路由对象引入到Vue实例中，最后在App.vue中，通过标签来激活路由，并利用:id表示传递参数。

通过上述两个示例，我们可以了解到Vue路由vue-router的使用方法及流程。