vue-router

vue-router是vue中重要的模块（路由），我们通常在一个SPA中，经常都需要进行切换不同组件中的功能，所以使用路由我们是必不可少的，接下来就讲解一下，router应该如何使用在vue的项目中

首先，我们要使用vue-router中，首先要先使用npm对其进行下载

npm install vue-router -S

-S,代表下载到package.json中的devDependencies下，因为我们需要在这里去调用

安装好之后，我们在vue-cli中先对其进行实例化

import Vue from 'vue'

import router from './router'

Vue.config.productionTip = false

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

其实就是实例一个router，我们使用这个router的时候，也可以写成router:router，不过简写的话，就可以写成我的这种

接下来的话，我们在src目录下创建一个叫做router的文件夹，里面配置一个名字为index.js的文件，配置的详细如下

import Vue from 'vue'
import VueRouter from 'vue-router'
//导入包

Vue.use(VueRouter)

const router = new VueRouter()   //实例化router

export default router //导出router

我们在html文件中需要添加<router-link></router-link>这个标签，这个标签用来我们绑定需要跳转的组件，具体使用如下

<router-link to="/Simeset">首页</router-link>
 <router-link to="/demo">案例</router-link>

to后面所跟的地址叫做哈希地址，这个路径名字取什么无所谓，但必须和路由匹配中的名字相同

<router-view><router-view>通常我们使用router-link后都需要这个router-view来进行搭配，这个router-view是一个占位符，主要用来显示router-view显示不同的组件中，显示的部分是放在这个router-view上

现在我们来配置路由规则

在index.js的文件中，我们在刚刚实例化router中，需要先导入我们需要的组件，再增添routes路由规则，一并导出

import demo from  '@/components/demo.vue'
import Simeset from '@/components/Simeset.vue'

    const router = new VueRouter({
       routes:[
        { path:'/Simeset',component:Simeset},
        { path:'/demo',component:demo}
    ]
    })

嵌套路由

导入完之后，我们得确定path的路径是否和在router-link中的to属性下的哈希地址是否是一样的，如果不一样的话，那么路由规则是无法匹配的，就不会实现点击跳转。

当我们已经实现好一种基本的路由后，我们还会使用到嵌套路由，就是说，点击一个路由中，还有其他的路由的定义，这种情况下，我们就需要父子路由来进行申明，就需要用到children属性

const router = new VueRouter({
    routes:[
        { path:'/demo',component:demo},
        { path:'/Simeset',component:Simeset,children:[
            {
                path:'simset2',component:Simeset2
            }
        ]}
    
    ]})

这样就可以实现我们的嵌套路由

动态路由

当哈希地址的值后面是跟一个数字跳转时，并且有多个这样的逻辑顺序，我们就可以使用动态路由来实现这个功能，因为一个个的路由去匹配不同的数字，这样的话，代码量太大，所以动态路由绝对是不二之选

我们在html的文件中的script中先声明一个props用来传入当前id的值

再在index.js中修改代码，输入一个props:true的属性，并且绑定id，代码如下所示

const router = new VueRouter({
    routes:[
        { path:'/demo',componentdemo},
        { path:'/Simeset',component:Simeset},
        { path:'/Simeset/:id',component:Simeset,children:[
            {
                path:'simset2',component:Simeset2
            }
        ]}
    
    ]})

 这样的话，我们就可以在当中区匹配不同的id，但显示的组件却是相同的，这样就可以达到组件的复用（不用声明过多的不同路径来进行匹配，这样做可以提高代码的复用性，增强性能）