前端框架vue.js系列（13）：路由

深藏阁楼爱情的钟 2021-09-14 06:32 261阅读 0赞

路由是指实现单页面的效果，它需要使用到 vue-router.js，可以到官网去下载，vue-router.js要与vue.js版本一致，若使用vue脚手架将自带路由功能。

参考demo：

<!DOCTYPE html>
    <html lang="en">
    
    	<head>
    		<meta charset="UTF-8">
    		<title>vue路由</title>
    		<script src="../js/libs/vue/2.4.2/vue.min.js"></script>
    		<script src="../js/libs/vue/2.4.2/vue-router.js"></script>
    	</head>
    
    	<body>
    		<div id="box">
    			<div>
    				<router-link to="/home">主页</router-link>
    				<router-link to="/news">新闻</router-link>
    				<router-link to='/about'>关于</router-link>
    			</div>
    			<div>
    				<router-view></router-view>
    			</div>
    		</div>
    
    		<script>
    			//组件
    			var Home = {
    				data: function() {
    					return {
    						pop: "主页"
    					}
    				},
    				template: '<h3>我是{
       {pop}}</h3>'
    			};
    			var News = {
    				data: function() {
    					return {
    						pop: "新闻"
    					}
    				},
    				template: '<h3>我是{
       {pop}}</h3>'
    			}
    			var About = {
    				data: function() {
    					return {
    						pop: "关于"
    					}
    				},
    				template: '<h3>我是{
       {pop}}</h3>'
    			}
    			//配置路由
    			var routes = [{
    					path: '/home',
    					component: Home
    				},
    				{
    					path: '/news',
    					component: News
    				},
    				{
    					path: '/about',
    					component: About
    				},
    				//重定向
    				{
    					path: '*',
    					redirect: '/home'
    				}
    			]
    			//生成路由实例
    			const router = new VueRouter({
    				routes
    			})
    			//挂载到vue上
    			new Vue({
    				router,
    				el: '#box'
    			})
    		</script>
    	</body>
    
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，261人围观）

还没有评论，来说两句吧...

相关阅读

相关 vuejs路由传参方法

常用的： getDescribe(id) { // 直接调用$router.push 实现携带参数的跳转 this.$router.p

本是古典何须时尚/ 2023年01月17日 08:47/ 0 赞/ 271 阅读

相关 Vue前端路由

Vue前端路由 Vue Router vue-router的基本使用引入相关的库文件添加路由链接添加路由填充位

男娘i/ 2022年08月29日 00:02/ 0 赞/ 310 阅读

相关前端路由与后端路由

后端路由意味着浏览器刷新页面。显然很多 webapp 的需求上是不希望这样的体验的。网速慢的话说不定屏幕全白再有新内容。前端路由就不会有这样的问题了。随意控制，逻辑也可

旧城等待，/ 2022年07月16日 03:39/ 0 赞/ 288 阅读

相关前端路由与后端路由

说起前端框架，我个人主张有框架不如无框架，这个观点要先从框架和库的区别说起。　　我所理解的库，解决的是代码或是模块级别的复用或者对复杂度的封装问题;而框架，更多的是对模式级

谁借莪１个温暖的怀抱￠/ 2022年06月14日 04:27/ 0 赞/ 293 阅读

相关前端路由与后端路由

后端路由意味着浏览器刷新页面。显然很多 webapp 的需求上是不希望这样的体验的。网速慢的话说不定屏幕全白再有新内容。前端路由就不会有这样的问题了。随意控制，逻辑也可

叁歲伎倆/ 2022年06月14日 04:26/ 0 赞/ 314 阅读

相关 vuejs的路由功能

最简单的路由 1，原理：通过控制父组件一个路由变量的值，来动态改变指向的组件; 而被指向的组件又通过渲染方法被渲染到父组件中，因此当指向组件改变时，被

港控/mmm°/ 2022年05月24日 04:53/ 0 赞/ 269 阅读

相关【前端】Vue路由

介绍为了提高浏览器页面响应速度，在功能的开发中，应该尽量避免创建多个页面，因为浏览器在页面的跳转过程中会先删除之前的界面，然后重新渲染新加载界面上的DOM元素，这一

喜欢ヅ旅行/ 2022年03月15日 12:50/ 0 赞/ 369 阅读

相关前端路由笔记

前端路由的实现本质：检测URL变化，获取url地址，解析url匹配页面；检测URL变化有两种方式： hash，HTML5 History 1. HTML5 Histo

た入场券/ 2022年03月06日 06:48/ 0 赞/ 368 阅读

相关前端框架vue.js系列（13）：路由

路由是指实现单页面的效果，它需要使用到 vue-router.js，可以到官网去下载，vue-router.js要与vue.js版本一致，若使用vue脚手架将自带路由功能。

深藏阁楼爱情的钟/ 2021年09月14日 06:32/ 0 赞/ 262 阅读

相关 Vuejs基本知识(九)【路由】

路由是所有前端框架中都必须具备的元素。它定义了对于那个URL（页面），应该由那个文件来处理。在`Vuejs`中，路由专门独立成为了一个项目: `vue-router`.

梦里梦外;/ 2021年06月26日 16:06/ 0 赞/ 600 阅读