【路由规则通信】Vue中单级路由用法

        在原生js中我们按钮切换的时候会有一个抖动问题，但是要解决这个问题，我们在之前是没有很好的办法解决的，我们在原生js中要实现按钮分别不同跳转，那么必须得准备按钮所对应的页面，这样会导致一个问题，如果我们的按钮很多那么所对应的页面也会要准备很多，而且代码的重复量很高，所以后期维护起来也很难。

        所以这个时候我们可以用到vue中的路由规则，说到路由规则先看一下是怎末实现的，如下图：

 可以看到路由器是相当于是中间接收，是通过路由器来实现两个组件无抖动的发生跳转，我们可以看一下在程序中是怎么实现的：

        第一步，是先引入我们所需要的环境路由器：

下面是vue2所安装的版本

npm i vue-router@3

下面是vue3所下载的版本：

npm i vue-router@4或者直接npm i vue-router

        安装完成路由组件我们就可以impart来导入即可 

//引入路由
import Vuerouter from 'vue-router'
import C from '../pages/C.vue'
import D from '../pages/D.vue'

export default new Vuerouter({
    routes:[//路由配置
        {
            path:'/C',
            component:C
        },
        {
            path:'/D',
            component:D
        }
    ]
})

        简单来说一下，首先引入组件C和D，依次去配置router的path路径以及所对应的注册组件，可以看到router是个数组，里面是可以配置很多的路径方案。

        最后是引入页面中，在路由中有特殊的标签来引入页面。

 <router-link class="a" to="/C">点击</router-link>
    <router-link to="/D">点击</router-link>

这个标签可以在页面中解析成a标签，但是他和a是不一样的，所以不能用混了，要注意这个细节。

        最后把切换的页面展示在页面上就可以达到页面无刷新无抖动实现切换，用户体验也是很好的：

<router-view></router-view>

这个也是路由的特殊标签，可以用于展示页面切换信息。