当前位置：首页 > news >正文

定制链接类名，两类跳转传参，vue路由重定向，404，模式设置

news 2025/7/12 14:23:12

router-link-exact-active 和 router -link-active两个类名都太长，可以在router路由对象中定制进行简化

// index.js// 路由的使用步骤 5+2
//  1.下载 v3.6.5
// 2.引入
// 3.安装注册Vue.use(Vue插件)
// 4.创建路由对象
// 5.注入到new Vue中，建立关联// 2个核心步骤
// 1.建组件(views目录)，配规则
// 2.准备导航链接，配置路由出口(匹配的组件所展示的位置)import Find from '@/views/Find.vue'
import My from '@/views/My.vue'
import Friend from '../views/Friend.vue'import Vue from 'vue' //原本在main.js中已经导入了vue，所以VueRouter初始化用到vue不报错，但是这里没有导入vue，插件初始化又用到了，所以需要先导入
import VueRouter from 'vue-router'
Vue.use(VueRouter) //VueRouter插件初始化
const router = new VueRouter({  //创建路由对象//routes 配置路由规则//route 一条路由规则就是一个对象 {path:路径，component:组件}routes: [{ path: '/find', component: Find },{ path: '/my', component: My },{ path: '/friend', component: Friend },],linkActiveClass: 'active',linkExactActiveClass: 'exact-active',
})
export default router //因为路由对象要在main.js中使用，所以需要导出，导出路由对象

打开页面发现已经变成简化后的类名

声明式导航 - 跳转传参（在跳转路由时，进行传值）

查询参数传参
语法格式： to = '/path ? 参数名 = 值'
对应页面组件接收传递过来的值： $route.query.参数名

动态路由传参
配置动态路由：routes:[...,{path:'/search/:words',component:Search}]
配置导航链接：to = "/path/参数值"
对应页面组件接收传递过来的参数值：$route.params.参数名

查询参数传参
在Home.vue首页导航链接中，三个链接“程序员”，“前端”，“前端大牛”,点击之后均能跳转到Search.vue组件内容上，想要跳转之后获取链接参数，在跳转路径上加上？key=参数。

点击链接跳转之后，地址栏路径会带上？key=参数

Search.vue组件上通过 $route.query.key 进行双大括号进行显示，但是在created中，需加this

<!-- App.vue -->
<template><div id="app"><div class="link"><router-link to="/home">首页</router-link><router-link to="/search">搜索页</router-link></div><router-view></router-view></div>
</template><script>
export default {};
</script><style scoped>
.link {height: 50px;line-height: 50px;background-color: #495150;display: flex;margin: -8px -8px 0 -8px;margin-bottom: 50px;
}
.link a {display: block;text-decoration: none;background-color: #ad2a26;width: 100px;text-align: center;margin-right: 5px;color: #fff;border-radius: 5px;
}
</style>

<!-- Search.vue -->
<template><div class="search"><p>搜索关键字: {{ $route.query.key }} </p><p>搜索结果: </p><ul><li>.............</li><li>.............</li><li>.............</li><li>.............</li></ul></div>
</template><script>
export default {name: 'MyFriend',created () {// 在created中，获取路由参数// this.$route.query.参数名 获取console.log(this.$route.query.key);}
}
</script><style>
.search {width: 400px;height: 240px;padding: 0 20px;margin: 0 auto;border: 2px solid #c4c7ce;border-radius: 5px;
}
</style>

<!-- Home.vue -->
<template><div class="home"><div class="logo-box"></div><div class="search-box"><input type="text"><button>搜索一下</button></div><div class="hot-link">热门搜索：<router-link to="/search?key=程序员">程序员</router-link><router-link to="/search?key=前端">前端</router-link><router-link to="/search?key=前端大牛">前端大牛</router-link></div></div>
</template><script>
export default {name: 'FindMusic'
}
</script><style>
.logo-box {height: 150px;background: url('@/assets/logo.jpeg') no-repeat center;
}
.search-box {display: flex;justify-content: center;
}
.search-box input {width: 400px;height: 30px;line-height: 30px;border: 2px solid #c4c7ce;border-radius: 4px 0 0 4px;outline: none;
}
.search-box input:focus {border: 2px solid #ad2a26;
}
.search-box button {width: 100px;height: 36px;border: none;background-color: #ad2a26;color: #fff;position: relative;left: -2px;border-radius: 0 4px 4px 0;
}
.hot-link {width: 508px;height: 60px;line-height: 60px;margin: 0 auto;
}
.hot-link a {margin: 0 5px;
}
</style>

动态路由传参：配置路由规则，配置导航链接，配置参数获取

配置路由规则，Search组件地址栏路径后用动态参数名：words（任取)

配置导航链接，直接将需要的参数值写在地址栏路径后面 /参数值

配置参数获取，展示时直接$route.params.参数名。在created中是this.$route.params.参数名

<!-- App.vue -->
<template><div id="app"><div class="link"><router-link to="/home">首页</router-link><router-link to="/search">搜索页</router-link></div><router-view></router-view></div>
</template><script>
export default {};
</script><style scoped>
.link {height: 50px;line-height: 50px;background-color: #495150;display: flex;margin: -8px -8px 0 -8px;margin-bottom: 50px;
}
.link a {display: block;text-decoration: none;background-color: #ad2a26;width: 100px;text-align: center;margin-right: 5px;color: #fff;border-radius: 5px;
}
</style>

<!-- Home.vue -->
<template><div class="home"><div class="logo-box"></div><div class="search-box"><input type="text"><button>搜索一下</button></div><div class="hot-link">热门搜索：<router-link to="/search/程序员">程序员</router-link><router-link to="/search/前端">前端</router-link><router-link to="/search/前端大牛">前端大牛</router-link></div></div>
</template><script>
export default {name: 'FindMusic'
}
</script><style>
.logo-box {height: 150px;background: url('@/assets/logo.jpeg') no-repeat center;
}
.search-box {display: flex;justify-content: center;
}
.search-box input {width: 400px;height: 30px;line-height: 30px;border: 2px solid #c4c7ce;border-radius: 4px 0 0 4px;outline: none;
}
.search-box input:focus {border: 2px solid #ad2a26;
}
.search-box button {width: 100px;height: 36px;border: none;background-color: #ad2a26;color: #fff;position: relative;left: -2px;border-radius: 0 4px 4px 0;
}
.hot-link {width: 508px;height: 60px;line-height: 60px;margin: 0 auto;
}
.hot-link a {margin: 0 5px;
}
</style>

<!-- Search.vue -->
<template><div class="search"><p>搜索关键字: {{ $route.params.words }} </p><p>搜索结果: </p><ul><li>.............</li><li>.............</li><li>.............</li><li>.............</li></ul></div>
</template><script>
export default {name: 'MyFriend',created () {// 在created中，获取路由参数// this.$route.query.参数名 获取// this.$route.params.参数名 获取console.log(this.$route.params.words);}
}
</script><style>
.search {width: 400px;height: 240px;padding: 0 20px;margin: 0 auto;border: 2px solid #c4c7ce;border-radius: 5px;
}
</style>

// index.js
import Home from '@/views/Home'
import Search from '@/views/Search'
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter) // VueRouter插件初始化// 创建了一个路由对象
const router = new VueRouter({routes: [{ path: '/home', component: Home },{ path: '/search/:words', component: Search }]
})export default router