广东网站备案多长时间,财经网站直播系统建设,saas建站 彩页,wordpress 导航栏图标router-link-exact-active 和 router -link-active两个类名都太长#xff0c;可以在router路由对象中定制进行简化 // index.js// 路由的使用步骤 52
// 1.下载 v3.6.5
// 2.引入
// 3.安装注册Vue.use(Vue插件)
// 4.创建路由对象
// 5.注入到new Vue中#xff0c;建立关联… router-link-exact-active 和 router -link-active两个类名都太长可以在router路由对象中定制进行简化 // index.js// 路由的使用步骤 52
// 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.vueimport 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 --
templatediv idappdiv classlinkrouter-link to/home首页/router-linkrouter-link to/search搜索页/router-link/divrouter-view/router-view/div
/templatescript
export default {};
/scriptstyle 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 --
templatediv classsearchp搜索关键字: {{ $route.query.key }} /pp搜索结果: /pulli............./lili............./lili............./lili............./li/ul/div
/templatescript
export default {name: MyFriend,created () {// 在created中获取路由参数// this.$route.query.参数名 获取console.log(this.$route.query.key);}
}
/scriptstyle
.search {width: 400px;height: 240px;padding: 0 20px;margin: 0 auto;border: 2px solid #c4c7ce;border-radius: 5px;
}
/style
!-- Home.vue --
templatediv classhomediv classlogo-box/divdiv classsearch-boxinput typetextbutton搜索一下/button/divdiv classhot-link热门搜索router-link to/search?key程序员程序员/router-linkrouter-link to/search?key前端前端/router-linkrouter-link to/search?key前端大牛前端大牛/router-link/div/div
/templatescript
export default {name: FindMusic
}
/scriptstyle
.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 --
templatediv idappdiv classlinkrouter-link to/home首页/router-linkrouter-link to/search搜索页/router-link/divrouter-view/router-view/div
/templatescript
export default {};
/scriptstyle 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 --
templatediv classhomediv classlogo-box/divdiv classsearch-boxinput typetextbutton搜索一下/button/divdiv classhot-link热门搜索router-link to/search/程序员程序员/router-linkrouter-link to/search/前端前端/router-linkrouter-link to/search/前端大牛前端大牛/router-link/div/div
/templatescript
export default {name: FindMusic
}
/scriptstyle
.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 --
templatediv classsearchp搜索关键字: {{ $route.params.words }} /pp搜索结果: /pulli............./lili............./lili............./lili............./li/ul/div
/templatescript
export default {name: MyFriend,created () {// 在created中获取路由参数// this.$route.query.参数名 获取// this.$route.params.参数名 获取console.log(this.$route.params.words);}
}
/scriptstyle
.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 其实就是配置路由规则时用参数名 动态地将导航链接地址中写的参数值进行接收 Vue路由 - 重定向打开页面自动匹配相应组件 该路由规则就是匹配到根路径时自动跳转到相应组件 Vue路由 - 404 在index.js中配置路由规则在路由规则最后面写上匹配不到任何路径显示NotFound组件 在views文件夹下新建NotFound.vue组件用来显示匹配不到路径的情况 在index.js中进行导入组件 Vue 路由 - 模式设置 hash路由默认带#history路由(常用)
