Vue路由基础使用

引入vue-router

在终端中输入vue add router
打开main.js发现已经引入了

src目录下的router文件夹下就是配置好的router文件

src下的view文件夹下有两个vue文件

在打开APP.vue发现使用了这两个vue文件

再启动服务

点击这两个按钮将进入不同的页面，同时我们可以发现

地址也发生了改变

如果要改变to属性的值，我们需要改变router文件夹下的js文件

这里的path要与app.vue中to属性的值一一对应起来。

当我们点击link标签时，它会自动生成一个class名称
这个名称比较长，我们可以通过linkActiveClass属性来控制class名称。
在routes目录下打开index.js

页面间传值

1.query ?id=“123”
比如在Home页面中写下

<router-link to="/about?key=0">发送</router-link>

当点击发送时，可以看到
说明数据发送了过去，
也可以使用v-bind动态传值，值得注意的是使用v-bind传值要使用模板字符串``

传递的值在Vue实例的$route.quert.值名上，

传递多个值时

在APP.vue的实例化后的钩子函数created中输出
console.log(this);
我们可以在$route.quert中发现我们传送的值

2.动态路由传值

在router文件夹下的index.js文化中
将要接受数据页面的path写为下面形式

在Home页面将值传入
点击about，看看页面是什么样的，这里传入的值在Vue实例的**$route.params**中，我直接把它渲染到了页面上

使用动态路由值得注意的是文件之间的路径