【vuejs路由】vuejs 路由基础入门实战操作详细指南
官方文档:
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 或不写 后面的参数
如果不跟?号 ,必须写这个参数
如果想传多个参数
在路由里面添加多个key
path: '/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 '/'}}}]
})
【vuejs路由】vuejs 路由基础入门实战操作详细指南相关推荐
- php laravel入口文件,Laravel 应用的入口:路由系列之基础入门篇
Laravel 应用的入口:路由系列之基础入门篇 Created 3 years ago by 学院君, Updated 11 months ago Revision #2 71677 views 9 ...
- CSS基础入门(详细总结笔记)
目录 1.CSS介绍 2.CSS引入方式 2.1.行内样式 2.2.内联样式 2.3.外联样式 2.4.样式的优先级 2.5.样式选择 3.CSS选择器 3.1.基本选择器 3.2.属性选择器 3.3 ...
- 渗透测试工具集(非常详细),从零基础入门到精通,看完这一篇就够了(附安装)
写在前面:这段时间由于发布了很多关于黑客工具教程的文章,后台经常会受到很多初学安全朋友的私信"初学者如何入门安全"."要去哪里找学习资料"等等.想起当初自己学安 ...
- 计算机网络作业计算机配置,某高校网工课后作业《路由交换综合案例》配置详细步骤(含配置文件)...
原标题:某高校网工课后作业<路由交换综合案例>配置详细步骤(含配置文件) 网 工 圈 关注 有网友,遇到一个案例,不会配,私信:龙哥 安排! 题目如下: 1 题目需求 说明:n代表几班,X ...
- 网络安全入门教程(超级详细)从零基础入门到精通,看这一篇就够了。
前言 随着Web技术发展越来越成熟,而非Web服务越来越少的暴露在互联网上,现在互联网安全主要指的是Web安全. 为了自身不"裸奔"在大数据里,渐渐开始学习Web安全,在学习Web ...
- 路由设计技术基础(Fundamentals of routing design technology)
路由设计技术基础(Fundamentals of routing design technology) UDP(User Datagram Protocol) FUNCTION TCP(Transmi ...
- 万字长文爆肝Python基础入门【巨详细,一学就会】
目录 数据的名字和种类--变量和类型 初探数据种类 数据类型 数值运算 比较运算 变量和赋值 变量的好处 用赋值更新变量 变量和数据类型的关系 总结 数据类型 数值运算 数值比较 变量和赋值 一串数据 ...
- PySide2 基础入门-创建实例窗口(详细解释)
PySide2 基础入门-创建实例窗口(详细解释) python 3.7 / Pyside2 (如果使用pyQt5,将Pyside2 直接替换PyQt5即可)首先我们在Qt Designer中画好界面 ...
- Python语言学习:python语言的特点、入门、基础用法之详细攻略
Python语言学习:python语言的特点.入门.基础用法之详细攻略 相关内容 Python 基础教程 目录 python语言的特点 python语言的入门 python语言的基础用法 python ...
最新文章
- 数学图形(1.21)蚌线
- Qt Creator使用外部工具
- LINUX2.4.x网络安全框架
- centos中nodejs npm环境完全删除
- 不服来战!青藤发起“雷火引擎”公测赛 百万赏金寻顶尖白帽
- JavaScript中的const
- zookeeper能做什么?
- Spring 的application.properties项目配置与注解
- form表单input file类型的重置
- python自学网站-python自学网站
- 定制C# combobox的下拉框
- [luogu1081] 开车旅行
- spring aop和事务同时开启带来的一些问题
- DirectX12(D3D12)基础教程(十八)—— PBR基础从物理到艺术(中)
- 对RS232接口的详细攻破
- Python3网络爬虫(十三):王者荣耀那些事!(Fiddler之手机APP爬取)
- 基于真实电商的下单扣库存学习理解分布式事务解决方案
- 个人独资企业,核定征收;怎么申请?
- sip 时序图_教你如何看懂时序图(小白如何快速轻松的看懂时序图)
- java哪个软件编程好学吗_java是什么软件好学吗(java编程用哪个软件)
热门文章
- UA PHYS515A 电磁理论III 静磁学问题3 静磁学问题的边界条件与标量势方法的应用
- VC++ 2010 MFC新特性学习 - 增强与Windows Shell的集成
- Java Maven学习 - 1
- C#_动态获取鼠标位置的颜色
- 简单一招搞定 three.js 屏幕适配
- Tableau10.0学习随记-分组问题
- Modal提示框插件的使用
- 信息安全系统设计基础第九周总结
- 转货币格式和 rgb转hex
- [cocos2d-x·总结]关于cocos2d-x几种画图方法的用法与思考