how2j.cn

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

步骤 1 :

vue.js 里的路由概念

edit
vue.js 里的路由相当于就是局部刷新。
如效果所示,点击左边的菜单,右边的内容在不刷新整个页面的情况下,进行局部刷新
<script src="http://how2j.cn/study/vue.min.js"></script> <script src="http://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="http://how2j.cn/study/vue.min.js"></script> <script src="http://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公众号,关注后实时获知布最新的教程和优惠活动,谢谢。


问答区域    
2019-09-20 内容好少
Q7_iu
希望其他的知识点不要这么草草的写过去了。。感觉vue很多都是水过去的




1 个答案

小飞猪 答案时间:2019-09-28
可以去vue的官网看更详细的内容,2333



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




2019-08-14 大概了解了
WANGMING123



我大概了解下一共有四个步骤,分别是: 1.定义路由组件,就是定义template 2.定义路由,为路由赋值这些路由组件 3.实例路由,就是用到VueRouter包 4.挂载路由,就是用到Vue包
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>王家测试</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script>
</head>
<body>
<div id="app">
    <div style="float: left">
    <table>
        <tr>
        <td><router-link to="/user">用户管理</router-link></td>
        </tr>
        <tr>
        <td><router-link to="/product">产品管理</router-link></td>
        </tr>
        <tr>
        <td><router-link to="/review">订单管理</router-link></td>
        </tr>
    </table>
    </div>
    <div style="float: right">
        <router-view></router-view>
    </div>
</div>
<script>
    //import Vue from 'vue'
    const User={template:'<div>用户管理页面的内容</div>'}
    const Product={template: '<div>产品管理页面的内容</div>'}
    const Review={template:'<div>订单管理页面的内容</div>'}

    const routes=[
        {path:'/user',component:User},
        {path:'/product',component: Product},
        {path:'/review',component:Review}
    ]

    const router=new VueRouter(
        {
            routes
        }
    )

    const app=new Vue(
        {
            router
        }
    ).$mount("#app")
</script>
</body>
</html>

							





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





2019-05-20 兄弟们,多结合百度看吧,这给的东西太少了,也看不懂
2019-05-09 看不懂,这不就是一个TAB功能吗?为什么还要用到路由去实现呢?
2019-03-19 说的什么玩意
2019-03-07 点击网页 导向<router-view></router-view>
2018-07-31 一直在new VueRouter这里报错




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

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

上传截图