Vue router 使用记录

在使用Vue编写项目的过程中，我们需要使用VueRouter对我们的路径进行高效的管理，我将使用VueRouter过程中的步骤和细节记录于此。

一、安装

1，如果使用vue-cli脚手架搭建项目，那么在创建项目时vue-cli会询问我们是否要选择VueRouter，我们选择Y后便会自动帮我们下载依赖。 2，除了通过vue-cli安装VueRouter外，用户还可以通过以下代码自己手动安装：

npm install vue-router

yarn add vue-router

二、创建组件

vue-cli在搭建项目后会在src目录下生成一个router文件夹，src/router/index.js这个文件就是陆游的关键性文件。

import Vue from 'vue';//引入vue
import VueRouter from 'vue-router' //引入vue-router

import Hello from '@/components/Hello'
import Home from '@/components/Home'
import Children from '@/components/Children'
import Children1 from '@/components/Children1'
import Children2 from '@/components/Children2'
//引入各组件

vue.use(VueRouter) //全局注册VueRouter

const routes=[ //注意routes的结构是一个数组，内容为对象
{path:'/',component:Hello},
{path:'/home',component:Home},
{path:'/children,component:Children,
[{path:'/',component:Children},{path:'/1',component:Children1},{path:'/2',component:Children2}]} //一个路径中还可以嵌套子路径
]

const router = new VueRouter({
    routes
}); //创建路由实例

export default router; //导出

//最后需要在Vue实例中使用
import router from './store/index'
new Vue({
    router,
    render: h => h(App)
}).$mount('#app');

三、使用router-link和router-vive

<router-link to="/" active-class="selected"></router-link>

如果我们打开控制台观察router-link对应的标签，我们会发现它其实是一个a标签，无疑，vue将a标签重新封装后得到了router-link标签，其中to后面填写导航路径，active-class则是点击这个标签后会自动激活的一个class，我们可以对其添加一些特点的样式。 router-view 用于渲染匹配到的组件。

四、动态路由

一个『路径参数』使用冒号 : 标记。当匹配到一个路由时，参数值会被设置到this.$route.params，可以在每个组件内使用。 例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。那么，我们可以在 vue-router 的路由路径中使用『动态路径参数』来达到这个效果。

const User={
template:'<div>name<div>'
}
const router=new VueRouter({
routes:[
{path:'/user/:name,componrnt:User}
]
})