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

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>

渲染中渲染完成

效果

为了实现路由，需要一个额外的库： vue-router.min.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>

渲染中渲染完成

效果

vue.js 里的路由概念

vue-router.min.js

路由代码讲解