vue之路由
发布日期：2021-05-07 01:05:10
浏览次数：43
分类：原创文章
本文共 6309 字，大约阅读时间需要 21 分钟。
实现一个简单路由
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>模拟路由</title> <script src="../vue202012/vue.js"></script></head><body> <!-- 被vue实例控制的div区域 --> <div id="app"> <!-- 切换组件的超链接 --> <a href="#/zhuye">主页</a> <a href="#/keji">科技</a> <a href="#/caijing">财经</a> <a href="#/yule">娱乐</a> <component :is="comName"></component> </div> <script> // 主页组件 const zhuye = { template: `<h1>主页信息</h1>` } // 科技组件 const keji = { template: `<h1>科技信息</h1>` } // 财经组件 const caijing = { template: `<h1>财经信息</h1>` } // 娱乐组件 const yule = { template: `<h1>娱乐信息</h1>` } const vm = new Vue({ el: '#app', data: { comName: 'keji' }, // 注册私有组件 components: { zhuye, keji, caijing, yule } }) // 监听window的onhashchange事件,根据获得的最新的hash值,切换要显示的组件的名称 window.onhashchange = () => { // 通过location.hash获取到最新的hash值 // console.log(location.hash.slice(2)) vm.comName = location.hash.slice(2) } </script></body></html>通过location.hash获取到最新的hash值是带有#/前缀的，所以我们要用slice()方法去掉这个前缀
注意：
<component :is="comName"></component>:is属性的值一定是一个字符串
效果：
上代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <!-- 导入 vue 文件 --> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script></head><body> <div id="app"> <!-- 添加路由链接 --> <router-link to="/user">User</router-link> <router-link to="/register">Register</router-link> <!-- 添加路由填充位 --> <router-view></router-view> </div> <script> // 创建路由组件 const User = { template:"<h1>User Component</h1>" } const Register = { template:"<h1>Register Component</h1>" } // 创建路由实例对象 const router = new VueRouter({ routes:[ { path:'/user',component:User}, { path:'/register',component:Register} ] }) var vm = new Vue({ el: '#app', data: { }, methods: { }, // 挂载路由实例对象 // router:router ES6里面属性名和属性值一样的话可以简写为下面的 router }); </script></body></html>效果：
两个<router-link></router-link>都自动转化为a标签了
上代码：
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="../vue202012/vue.js"></script> <script src="../vue202012/vue-router.js"></script></head><body> <div id="app"> <router-link to="/user">User</router-link> <router-link to="/register">Register</router-link> <router-view></router-view> </div> <script> // 创建路由组件 const User = { template: '<h1>User</h1>' } const Register = { template: ` <div> <h1>Register</h1> <hr/> <!-- 子路由链接 --> <router-link to="/register/tab1">Tab1</router-link> <router-link to="/register/tab2">Tab2</router-link> <!-- 子路由占位符 --> <router-view></router-view> </div> ` } // 子组件1 const tab1 = { template: '<h3>Tab1子组件</h3>' } // 子组件2 const tab2 = { template: '<h3>Tab2子组件</h3>' } // 创建路由实例对象 const router = new VueRouter({ routes: [ { path: '/user', component: User }, { // Register组件路由下面设置子路由 path: '/register', component: Register, children: [ { path: '/register/tab1', component: tab1 }, { path: '/register/tab2', component: tab2 }, ] } ] }) var vm = new Vue({ el: '#app', data: { }, methods: { }, router }); </script></body></html>效果：
上代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <!-- 导入 vue 文件 --> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script></head><body> <div id="app"> <!-- 添加路由链接 --> <router-link to="/user/1">User1</router-link> <router-link to="/user/2">User2</router-link> <router-link to="/user/3">User3</router-link> <router-link to="/register">Register</router-link> <!-- 添加路由填充位 --> <router-view></router-view> </div> <script> // 创建路由组件 const User = { template:"<h1>User{ { $route.params.id }} Component</h1>" } const Register = { template:"<h1>Register Component</h1>" } // 创建路由实例对象 const router = new VueRouter({ routes:[ { path:'/',redirect:'/user'}, { path:'/user/:id',component:User}, { path:'/register',component:Register} ] }) var vm = new Vue({ el: '#app', data: { }, methods: { }, // 挂载路由实例对象 // router:router ES6里面属性名和属性值一样的话可以简写为下面的 router }); </script></body></html>效果：
把之前的代码修改一下：
之前是这样传参的：
现在可以这样：
保存，效果还是一样的
这时候组件里面就不能访问id了，只能访问props对象里面提供的值：
这时候id就废了，虽然可以匹配成功，但是不能访问了，结果如下：
如何才能即得到id的值又能得到props里面的值?
props的值传一个函数
上代码：
注意这里不用写$route，直接写route.param.id就可以了
效果：
发表评论
最新留言
感谢大佬
[***.8.128.20]2025年03月29日 05时20分07秒
关于作者
喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！
-- 愿君每日到此一游！
推荐文章
springMVC:异步调用,异步请求跨域访问,拦截器,异常处理,实用技术
2021-05-08
Bug调试记录
2021-05-08
mybatis的基础配置
2021-05-08
基于.Net Core 5.0 Worker Service 的 Quart 服务
2021-05-08
ASP.net 常用服务器控件
2021-05-08
Azure Storage 系列（四）在.Net 上使用Table Storage
2021-05-08
我成为 Microsoft Azure MVP 啦！（ps：不是美国职业篮球）
2021-05-08
异步编程基础
2021-05-08
[模板] 带修莫队
2021-05-08
* 二维数组的使用
2021-05-08
abstract关键字的使用
2021-05-08
接口面试题
2021-05-08
创建线程的方式四：使用线程池
2021-05-08
算法题：获取一个字符串在另一个字符串中出现的次数
2021-05-08
算法题：获取两个字符串中的最大相同子串
2021-05-08
Calendar日历类(抽象类）的使用
2021-05-08
Asp.Net Core&Jenkins持续交付到Windows Server
2021-05-08
白红宇的个人博客 - 记录点点滴滴的事 - 您是第 457383618 位访客