vue 路由
来源:互联网 发布:linux sh是什么意思 编辑:程序博客网 时间:2024/06/06 02:07
https://router.vuejs.org/zh-cn/
用 Vue.js + vue-router 创建单页应用,是非常简单的。使用 Vue.js ,我们已经可以通过组合组件来组成应用程序,当你要把 vue-router 添加进来,我们需要做的是,将组件(components)映射到路由(routes),然后告诉 vue-router 在哪里渲染它们。
hash 和 history模式
默认hash模式:
以#/开始匹配,这种叫作哈希模式(hash)
HTML5 History 模式:
/开始,就是我们常见的方式没有 # 符号
<a href="/">首页</a> <a href="/work">工作</a>
我们此时使用a标签来切换比较麻烦,每次更改路由模式的时候,需要单独改a标签里面herf的链接
在vue里面提供了一个更好的方式,来解决这个问题
<router-link to="/">home主页</router-link> <router-link to="/work">我的工作</router-link>
<router-view/>
每次切换路由的时候,里面的内容都依靠<router-view/> 来显示在页面上
只有页面有导航的地方,打算让组件显示在页面上,必须写<router-view/>这个标签
<template> <div id="app"> <router-link to="/">home主页</router-link> <router-link to="/work">我的工作</router-link> <router-view/> 这个标签用来显示页面内容 </div></template>
router-link 默认解析成a标签
<a href="#/" class="router-link-active">home主页</a><a href="#/work" class="router-link-exact-active router-link-active">我的工作</a>
给导航添加激活样式
通过css里面设置
.router-link-active{ background-color:red}
当我们单独设置激活样式的时候,根路由 / 永远都会匹配到样式
我们可以在标签中添加 exact 方式来解决永远都会匹配到跟路径样式问题
直接加在标签属性上 <router-link exact to="/">home主页</router-link>
我们自己来给导航添加自定义class名字
通过 设置 active-class属性值 改变默认的激活样式类
<router-link to="/work" active-class="starkwang">我的工作</router-link>
统一更改激活样式
在 router/index.js里面设置 linkExactActiveClass属性
export default new Router({ // mode: 'history', mode: 'hash', linkExactActiveClass: 'shudong', //通过设置这个属性值,给所有的激活样式,添加统一的类当我们统一设置后,每次激活的路由标签,都带着自己设置的这个shudong类<a href="#/work" class="shudong starkwang">我的工作</a>
使用属性 tag 统一更改路由编译后的标签名字 -> <li> </li>
默认编译的标签名字是 a
<router-link to="/stark" tag="li">我的Stark</router-link>更改完后的dom<li class="shudong router-link-active">我的Stark</li>
路由嵌套 chidren
使用方式
{ path: '/about', // 这是一级路由 component: About, children: [{ // 里面是嵌套路由 path: 'blog', //如果在这个嵌套 name: 'blog', component: Blog }, { path: '/info', name: 'info', component: Info } ] }
如果在这个嵌套里面的path:'' 留空,默认会显示这个组件
http://localhost:8080/#/about此时会把 这个默认留空的嵌套路由组件显示出来,也就是上面的blog 组件显示出来
如果嵌套路由里面的path:'blog' 写具体的路由,则访问的时候必须匹配
必须是这个路由精准匹配http://localhost:8080/#/about/blog这样才会把这个blog嵌套路由组件显示出来
以 / 开头的嵌套路径会被当作根路径。
这让你充分的使用嵌套组件而无须设置嵌套的路径。
{ path: '/about', // 这是一级路由 component: About, children: [{ // 里面是嵌套路由 path: 'blog', //如果在这个嵌套 name: 'blog', component: Blog }, { path: '/info', // 以 / 开头的嵌套路径会被当作跟路径 name: 'info', component: Info } ] } 访问方式: http://localhost:8080/#/info
如果去掉/ 此时去掉了 '/info' -> 'info'
{ path: '/about', // 这是一级路由 component: About, children: [{ // 里面是嵌套路由 path: 'blog', //如果在这个嵌套 name: 'blog', component: Blog }, { path: 'info', // 此时去掉了 '/info' -> 'info' name: 'info', component: Info } ] } 访问方式: http://localhost:8080/#/about/info
你会发现,children 配置就是像 routes 配置一样的路由配置数组,所以呢,你可以嵌套多层路由。
此时,基于上面的配置,当你访问 /about/info 时,about 的出口是不会渲染任何东西,这是因为没有匹配到合适的子路由。
重定向
使用方式 path:'*'
这个 * 是匹配上面没有找到的路径,会到这里
可以直接写:component: NotFound,
redirect 这是一个函数,里面有参数 to
to 打印出来是一个对象
{name: undefined, meta: {…}, path: "/aaa", hash: "", query: {…}, …}
通过 to.path 可以获取当前用户访问的路径,来写一些逻辑跳转下面是使用详细方式
{ path: '*', // component: NotFound, redirect: (to) => { console.log(to); if (to.path === '/aaa') { return '/work' } else if (to.path === '/bbb') { return '/info' } else { return '/' } }}
最后附上所有路由文件代码
import Vue from 'vue'import Router from 'vue-router'import HelloWorld from '@/components/HelloWorld'import Work from '@/components/Work'import Stark from '@/components/Stark'Vue.use(Router)const UserProfile = { template: `<div> 我是profile 组件 </div>` };const UserPosts = { template: `<div> 我是UserPosts 组件 </div>` };const Blog = { template: `<div> 我是Blog 组件 </div>` };const Info = { template: `<div> 我是Info 组件 </div>` };const NotFound = { template: `<div>404 您访问的页面不存在 </div>` };const About = { template: `<div> 我是About组件 <router-view> </router-view> </div>` };const User = { // template: '<div>User {{ $route.params.id }}</div>' template: ' <div class="user"> \ <h2> User {{ $route.params.id } } </h2> \ <router-view> </router-view> \ </div>'}export default new Router({ // mode: 'history', mode: 'hash', linkExactActiveClass: 'shudong', routes: [{ path: '/', name: 'Hello', component: HelloWorld }, { path: '/work', name: 'Work', component: Work }, { path: '/stark', name: 'stark', component: Stark }, // { path: '/user/:id', component: User } { path: '/user/:id', component: User, children: [{ // 当 /user/:id/profile 匹配成功, // UserProfile 会被渲染在 User 的 <router-view> 中 path: 'profile', component: UserProfile }, { // 当 /user/:id/posts 匹配成功 // UserPosts 会被渲染在 User 的 <router-view> 中 path: 'posts', component: UserPosts } ] }, { path: '/about', component: About, children: [{ path: 'blog', name: 'blog', component: Blog }, { path: '/info', name: 'info', component: Info } ] }, { path: '*', // component: NotFound, redirect: (to) => { console.log(to); if (to.path === '/aaa') { return '/work' } else if (to.path === '/bbb') { return '/info' } else { return '/' } } } ]})
路由传参
传一个参数
在路由里面的path:'/user/:stark' 这个冒号后面跟的字符串相当于 key 在组件里面使用 this.$route.params.stark 来获取这个value的值访问方式:http://localhost:8080/#/user/wangwang 就是console.log(this.$route.params.stark) 值在后面跟 ?号可以 写wang 或不写 后面的参数如果不跟?号 ,必须写这个参数
如果想传多个参数
在路由里面添加多个keypath: '/user/:stark?/:name?访问方式http://localhost:8080/#/user/wang/stark打印结果 console.log(this.$route.params){stark: "wang", name: "shudong"}
{ path: '/user/:stark?/:name?', name: 'user', component: User},
案例:
user 组件
<template> <div> <router-link :to="'/user/' + item.id" v-for="item in userList">{{item.username}} </router-link> <div> <p> 姓名:{{userInfo.username}}</p> <p> 爱好:{{userInfo.hobby}}</p> <p> 性别:{{userInfo.sex}}</p> </div> </div></template> <script> let data = [ { id:1, tip:'vip', username:'luchang', sex:'男', hobby:'coding' }, { id:2, tip:'vip', username:'guomian', sex:'男', hobby:'女' }, { id:3, tip:'common', username:'zhangming', sex:'男', hobby:'bug' }, ] export default{ data(){ return{ userList:data, userInfo:'' } }, watch:{ $route(){ this.getData(); } }, created(){ this.getData(); }, methods:{ getData(){ // let id = this.$route; console.log(this.$route); let id = this.$route.params.userId; if(id){ this.userInfo = this.userList.filter((item)=>{ return item.id == id; })[0] } console.log(this.userInfo); // console.log(this.$route.params.stark); } } }</script>
路由
import Vue from 'vue'import Router from 'vue-router'import HelloWorld from '@/components/HelloWorld'import Work from '@/components/Work'import Stark from '@/components/Stark'import User from '@/components/User'Vue.use(Router)const UserProfile = { template: `<div> 我是profile 组件 </div>` };const UserPosts = { template: `<div> 我是UserPosts 组件 </div>` };const Blog = { template: `<div> 我是Blog 组件 </div>` };const Info = { template: `<div> 我是Info 组件 </div>` };const NotFound = { template: `<div>404 您访问的页面不存在 </div>` };const About = { template: `<div> 我是About组件 <router-view> </router-view> </div>` };const Users = { // template: '<div>User {{ $route.params.id }}</div>' template: ' <div class="user"> \ <h2> User {{ $route.params.id } } </h2> \ <router-view> </router-view> \ </div>'}export default new Router({ // mode: 'history', mode: 'hash', linkExactActiveClass: 'shudong', routes: [{ path: '/', name: 'Hello', component: HelloWorld }, { path: '/work', name: 'Work', component: Work }, { path: '/user/:userId?/:name?', name: 'user', component: User }, { path: '/stark', name: 'stark', component: Stark }, // { path: '/user/:id', component: User } { path: '/users/:id', component: Users, children: [{ // 当 /user/:id/profile 匹配成功, // UserProfile 会被渲染在 User 的 <router-view> 中 path: 'profile', component: UserProfile }, { // 当 /user/:id/posts 匹配成功 // UserPosts 会被渲染在 User 的 <router-view> 中 path: 'posts', component: UserPosts } ] }, { path: '/about', component: About, children: [{ path: 'blog', name: 'blog', component: Blog }, { path: '/info', name: 'info', component: Info } ] }, { path: '*', // component: NotFound, redirect: (to) => { // console.log(to); if (to.path === '/aaa') { return '/work' } else if (to.path === '/bbb') { return '/info' } else { return '/' } } } ]})
- Vue路由
- vue 路由
- Vue路由
- Vue路由
- vue路由
- Vue-路由
- vue 路由
- vue路由
- vue路由
- vue 路由vue-router
- vue路由 vue-router
- Vue 路由 vue-router
- (一) Vue 路由+子路由
- Vue动画 和 Vue路由
- Vue路由的使用
- vue路由学习
- vue-router: 嵌套路由
- vue-router 路由
- 彻底理解js中this的指向,不必硬背。
- HDP Hiveserver2搭建高可用
- 安装完oracle后从root用户切换执行命令“sqlplus / as sysdba”失败
- Building for UN UVA
- ArcGIS API for JavaScript的服务查询
- vue 路由
- 对语义化的理解?
- js如何将一个按钮显示或者隐藏
- 【算法读书笔记】第一章 基础
- 常用工具类
- html页面的日历
- svn diff代码使用Beyond Compare
- [容斥+Purfer编码] 51Nod1806 wangyurzee的树
- Markup.h和Markup.cpp Release 11.5