zoukankan      html  css  js  c++  java
  • vue-router

    1.引入插件vue-router

    <script type="text/javascript" src="./vue-router/dist/vue-router.js"></script>
    

    2.使用vueRouter

    		Vue.use(VueRouter);
    

     3.创建路由对象

    var router = new VueRouter({
    			// 4.配置路由对象
    			routes:[
    				// 路由匹配的规则
    				{
    					path:'/login',
    					component:Login
    				},
    				{
    					path:'/register',
    					component:Register
    				}
    			]
    		});
    

      4.声明组件

    var Login  = {
    			template:`<div>我是登录页面</div>`
    		};
    		var Register  = {
    			template:`<div>我是注册页面</div>`
    		};
    

      5.抛出全局组件

    var App = {
    			template:`
    				<div>
    					<!--router-link默认会被渲染成a标签,to默认会被渲染成href属性-->
    					<router-link to = '/login'>登录</router-link>
    					<router-link to = '/register'>注册</router-link>
    					
    					<!--路由组件的出口-->
    					<router-view></router-view>
    				</div>
    			`
    		}
    

      6.将配置好的路由对象放到实例化对象中

    new Vue({
    			el:'#app',
    			router:router,
    			template:`<App />`,
    			components:{
    				App
    			}
    		});
    

      代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title></title>
    </head>
    <body>
    	<div id="app"></div>
    	<!-- 1.先引入vue.js -->
    	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    	<!-- 2.引包 引入 核心的插件vue-router -->
    	<script type="text/javascript" src="./vue-router/dist/vue-router.js"></script>
    	<script type="text/javascript">
    
    		// 2.让vue使用该VueRouter创建
    		Vue.use(VueRouter);
    
    
    		//声明组件
    		var Login  = {
    			template:`<div>我是登录页面</div>`
    		};
    		var Register  = {
    			template:`<div>我是注册页面</div>`
    		};
    		// 3.创建路由对象
    
    		var router = new VueRouter({
    			// 4.配置路由对象
    			routes:[
    				// 路由匹配的规则
    				{
    					path:'/login',
    					component:Login
    				},
    				{
    					path:'/register',
    					component:Register
    				}
    			]
    		});
    
    		// 抛出两个全局的组件 router-link  router-view
    		
    		var App = {
    			template:`
    				<div>
    					<!--router-link默认会被渲染成a标签,to默认会被渲染成href属性-->
    					<router-link to = '/login'>登录</router-link>
    					<router-link to = '/register'>注册</router-link>
    					
    					<!--路由组件的出口-->
    					<router-view></router-view>
    				</div>
    			`
    		}
    
    		// Cannot read property 'matched' of undefined
    		// 5.将配置好的路由对象关联到vue实例化对象中
    		new Vue({
    			el:'#app',
    			router:router,
    			template:`<App />`,
    			components:{
    				App
    			}
    		});
    	</script>
    	
    </body>
    </html>
    

      效果:

  • 相关阅读:
    Medium | LeetCode 11. 盛最多水的容器 | 双指针
    Hard | LeetCode 41. 缺失的第一个正数 | 原地Hash
    Navicat Premium 15 使用注册机破解,附带Navicat Premium 15安装包、注册机下载
    vue $forceUpdate() 强制重新渲染
    js 原生录制屏幕
    mysql 8.0.17 解压版安装教程
    vue 移动端适配 amfe-flexibl
    mysql重置密码
    2059-Authentication plugin'caching_sha2_password'cannot be loaded
    用js实现时间减去前1小时、7天、1月、1年
  • 原文地址:https://www.cnblogs.com/guangzhou11/p/9538141.html
Copyright © 2011-2022 走看看