Vue路由

绝地灬酷狼 2022-05-10 09:44 224阅读 0赞

一个实例：

<!DOCTYPE html>
    <html>
    	<head>
    		<title>Vue.js路由router</title>
    		<script src="https://cdn.bootcss.com/vue/2.4.0/vue.js"></script>
    		<script src="https://cdn.bootcss.com/vue-router/2.4.0/vue-router.js"></script>
    
    	</head>
    	
    	<body>
    		<div id="app">
    			<div>
    				
    				
    				
    				<router-link to="/first">第1个页面</router-link>
    				<router-link to="/second">第2个页面</router-link>
    				<router-link to="/third">第3个页面</router-link>
    			</div>
    			
    			<router-view></router-view>
    		</div>
    	</body>
    	<script>
    		/*声明3个模板，也是定义路由组件，可以从其他文件中import进来*/
    		var first = {template:'<p>第一个模板</p>'};
    		var second = {template:'<p>第二个模板</p>'};
    		var third = {template:'<p>第三个模板</p>'};
    		
    		/*定义路由，每个路由应该映射成一个组件。其中component可以是通过Vue.extend()创建的组件构造器，或者是一个组件配置对象*/
    		var routes = [{path:'/first',component:first},
    						{path:'/second',component:second},
    						{path:'/third',component:third}];
    		/*创建router实例，进行routes的配置。还可以配置其他的参数，先不管。*/
    		var router = new VueRouter({
    			
    			/*缩写，等同于routes:routes*/
    			routes
    		});
    		
    		/*创建和挂载根实例，通过router配置参数注入路由，从而让整个应用都有路由功能*/
    		const app = new Vue({
    			/*缩写，等同于:router:router*/
    			router
    		}).$mount('#app');
    		
    		/*执行步骤：1，当router-link对应的标签被点击时，比如此时点击第二个，to的值是/second,那么实际的地址就是当前页面地址+#/second。
    						这里的#是因为vue-router默认使用hash模式。如果要去除，可以创建router时，使用model:history模式，同时，后台因为需要进行配置。
    
    　　				2，Vue会找到当前vue实例的路由里的routes里面path为/second的路由。
    
    　　				3，会将找到的这一行记录的模板component渲染到router-view里面。*/
    	</script>
    </html>