how2j.cn

下载区
文件名 文件大小
vue-router.min.js 23k
步骤 1 : vue.js 里的路由概念   
步骤 2 : vue-router.min.js   
步骤 3 : 路由代码讲解   

步骤 1 :

vue.js 里的路由概念

edit
vue.js 里的路由相当于就是局部刷新。
如效果所示,点击左边的菜单,右边的内容在不刷新整个页面的情况下,进行局部刷新
<script src="https://how2j.cn/study/vue.min.js"></script> <script src="https://how2j.cn/study/vue-router.min.js"></script> <head> <style> a{ text-decoration: none; } a.router-link-active{ /* color:blue; */ background-color: lightGray; } div.menu{ border:1px solid gray; float:left; } div.menu a{ display:block; } div.workingRoom{ margin-left:100px; } div#app{ width:500px; padding:10px; margin:10px auto; } </style> </head> <div id="app"> <div class="menu"> <!-- router-link 相当于就是超链 to 相当于就是 href --> <router-link to="/user">用户管理</router-link> <router-link to="/product">产品管理</router-link> <router-link to="/order">订单管理</router-link> </div> <div class="workingRoom"> <!-- 点击上面的/user,那么/user 对应的内容就会显示在router-view 这里 --> <router-view></router-view> </div> </div> <script> /* * 申明三个模板( html 片段 ) */ var user = { template: '<p>用户管理页面的内容</p>' }; var second = { template: '<p>产品管理页面的内容</p>' }; var order = { template: '<p>订单管理页面的内容</p>' }; /* * 定义路由 */ var routes = [ { path: '/', redirect: '/user'}, // 这个表示会默认渲染 /user,没有这个就是空白 { path: '/user', component: user }, { path: '/product', component: second }, { path: '/order', component: order } ]; /* * 创建VueRouter实例 */ var router = new VueRouter({ routes:routes }); /* * 给vue对象绑定路由 */ new Vue({ el:"#app", router }) </script>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
步骤 2 :

vue-router.min.js

edit
为了实现路由,需要一个额外的库: vue-router.min.js

<script src="http://how2j.cn/study/vue-router.min.js"></script>

如果要在本地测试,可以从右上角下载
步骤 3 :

路由代码讲解

edit
代码的讲解都写在注释里了,挨个看过去就好了
运行效果
<script src="https://how2j.cn/study/vue.min.js"></script> <script src="https://how2j.cn/study/vue-router.min.js"></script> <head> <style> a{ text-decoration: none; } a.router-link-active{ /* color:blue; */ background-color: lightGray; } div.menu{ border:1px solid gray; float:left; } div.menu a{ display:block; } div.workingRoom{ margin-left:100px; } div#app{ width:500px; padding:10px; margin:10px auto; } </style> </head> <div id="app"> <div class="menu"> <!-- router-link 相当于就是超链 to 相当于就是 href --> <router-link to="/user">用户管理</router-link> <router-link to="/product">产品管理</router-link> <router-link to="/order">订单管理</router-link> </div> <div class="workingRoom"> <!-- 点击上面的/user,那么/user 对应的内容就会显示在router-view 这里 --> <router-view></router-view> </div> </div> <script> /* * 申明三个模板( html 片段 ) */ var user = { template: '<p>用户管理页面的内容</p>' }; var second = { template: '<p>产品管理页面的内容</p>' }; var order = { template: '<p>订单管理页面的内容</p>' }; /* * 定义路由 */ var routes = [ { path: '/', redirect: '/user'}, // 这个表示会默认渲染 /user,没有这个就是空白 { path: '/user', component: user }, { path: '/product', component: second }, { path: '/order', component: order } ]; /* * 创建VueRouter实例 */ var router = new VueRouter({ routes:routes }); /* * 给vue对象绑定路由 */ new Vue({ el:"#app", router }) </script>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果


HOW2J公众号,关注后实时获知最新的教程和优惠活动,谢谢。


问答区域    
2020-07-22 提示VueRouter没有定义 = =
ForMySunny




如图
加载中

							

							


1 个答案

ForMySunny
答案时间:2020-07-22
害,js文件导入顺序问题...



回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢
答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到





2020-03-16 麻烦看看我这哪里错了
wuxianbiao




运行不出结果
<!DOCTYPE html>
<html>
<head>

<script src="jquery.min.js"></script>
<link href="bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" media="screen" href="css/bootstrap.css">
<script src="bootstrap.min.js"></script>
<script src= "vue.min.js"> </script>
<script src= "vue-router.min.js"> </script>
<meta http-equiv="Content-Type" content="text/html";Charset=UTF-8>
</head>

<body>
<div id="div1">
<div id="item">
<router-link  to="/user" >用户</router-link>
<router-link  to="/goods" >商品</router-link>
<router-link  to="/order" >订单</router-link>
<div style="border:1px solid gray;width:100px;height:100px">
<router-view></router-view>
</div>
</div>
</div>
<script>
var user={template:'<p>用户管理</p>'};
var goods={template:'<p>商品管理</p>'};
var order={template:'<p>订单管理</p>'};
var routes=[
{path:'/user' component:user},
{path:'/goods' component:goods},
{path:'/order' component:order}];

var router=new VueRouter({
routes:routes
});
new Vue({
el:"#div1",
router
})
</script>
</body>
</html>

							


2 个答案

罗差不多
答案时间:2020-07-16
为什么运行出来不行啊

wuxianbiao
答案时间:2020-03-16
找到问题了。path和component之间少了逗号



回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢
答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到





2019-09-20 内容好少
2019-08-14 大概了解了
2019-05-20 兄弟们,多结合百度看吧,这给的东西太少了,也看不懂


提问太多,页面渲染太慢,为了加快渲染速度,本页最多只显示几条提问。还有 4 条以前的提问,请 点击查看

提问之前请登陆
提问已经提交成功,正在审核。 请于 我的提问 处查看提问记录,谢谢
关于 前端部分-Vue.js-路由 的提问

尽量提供截图代码异常信息,有助于分析和解决问题。 也可进本站QQ群交流: 578362961
提问尽量提供完整的代码,环境描述,越是有利于问题的重现,您的问题越能更快得到解答。
对教程中代码有疑问,请提供是哪个步骤,哪一行有疑问,这样便于快速定位问题,提高问题得到解答的速度
在已经存在的几千个提问里,有相当大的比例,是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本,可以节约自己大量的学习时间。 站长把教学中用的软件版本整理了,都统一放在了这里, 方便大家下载: https://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图