Vue.js系列教材（十二）- vue.js 什么是路由？以及如何进行路由

下载区
文件名	文件大小
vue-router.min.js	23k
解压rar如果失败，请用5.21版本或者更高版本的winrar 点击下载 winrar5.21

工具版本兼容问题

步骤 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 全屏编辑，再次点击恢复

</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>

渲染中渲染完成

效果

步骤 2 :

vue-router.min.js

edit 顶折

纠问

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

如果要在本地测试，可以从右上角下载

步骤 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 全屏编辑，再次点击恢复

</script>

渲染中渲染完成

效果

Vue.js系列教材（十一）- vue.js 如何自定义指令

Vue.js系列教材（十三）- Fetch.js 教程实例

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

问答区域

2020-07-22 提示VueRouter没有定义 = =

ForMySunny

关于前端部分-Vue.js-路由的提问

如图

1 个答案

ForMySunny
答案时间：2020-07-22

害，js文件导入顺序问题...

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

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

wuxianbiao

关于前端部分-Vue.js-路由的提问

运行不出结果

<!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

为什么运行出来不行啊

代码超过 5行，点击查看

wuxianbiao
答案时间：2020-03-16

找到问题了。path和component之间少了逗号

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2019-09-20 内容好少

2019-08-14 大概了解了

WANGMING123

关于前端部分-Vue.js-路由的提问

我大概了解下一共有四个步骤，分别是： 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 兄弟们,多结合百度看吧,这给的东西太少了,也看不懂

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

提问之前请登陆

提问已经提交成功，正在审核。请于我的提问处查看提问记录，谢谢

关于前端部分-Vue.js-路由的提问

尽量提供截图、代码和异常信息，有助于分析和解决问题。也可进本站QQ群交流: 578362961

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

上传截图