vue项目---vue路由操作

目录

202221336029-网安2211

1.基础路由的挂载

1.封装到文件

2.路由器的基本操作

1.高亮显示

高亮实现

高亮显示与模糊匹配

自定义高亮名称

2.导航传参

1.静态传参

2.动态传参

3.可选符号：

3.总结：

---

202221336029-网安2211

1.基础路由的挂载

首先要在项目中下载router组件。

1.封装到文件

在router下建立router.js。

1. 将其他组件引入，同时要引入vue
2. 将VueRouter挂载到vue中
3. 产生VueRouter对象建立。routes中就是路径的配置。后面跟着的是组件名
4. export default使用VueRouter

在main.js中建立

要将vuter挂载到new vue中

2.路由器的基本操作

1.高亮显示

高亮实现

由原本的a-href改为 router-link to。这样在用户停留在某个路径时，那个位置会被自动添加clss定义。

class定义：.footer_wrap a.router-link-active这是类的默认名

结果

高亮显示与模糊匹配

在访问：/my/one时，仍然显示了高亮，是因为此时是模糊匹配，匹配到了my就会显示。

精度：修改为router-link-exact-active

自定义高亮名称

在创建VueRouter的时候可以对其进行配置

2.导航传参

1.静态传参

搜索关键字为等待传入的形参。

采用 路径名?参数名="参数值"  的方法传入参数

接受参数

$route.query.参数名接受参数

2.动态传参

添加:words 表示传入的参数名

不需要用?传入参数。接受参数使用$route.params.参数名将参数接受

url中显示了当前的参数值

3.可选符号：

动态传参中，如果没有传入参数则无法加载。

通过添加? 可以实现无参传导

在静态中支持传入无参

3.部件跳转

前言：在页面中我们常常通过按钮，图片等部件实现跳转

在vue中实现方法和js类似。都是对部件进行监视，当部件被执行时执行相应函数

1.路径跳转

为click绑定函数

this。$router.push内定义传入的配置

注意：不能写作name:"/search/前端培训"，这样的写法不支持参数传入

注释内的多种写法都可以

2.路径跳转传参

单独一项中parms对象内定义属性名和属性值

其他写法：

3.vue的重新定向

1.默认跳转

1.在path中添加'/'。表示url输入为空时，自动会跳转到 redirect指定的路径

2.错误路径跳转

path：'*'表示没能与前面匹配成功时，就会跳转到NotFound界面

 

3.路由器模式

使用mode: "history"模式

效果

3.总结：

路由操作允许实现页内跳转，保留一部分，而将另一部分修改。这样具有高效的特点。通过router取代了a-href 提高了便捷性。