第七章 路由 70 路由-vue-router的基本使用

 

 1 DOCTYPE html>
 2 <html lang="en">
 3 
 4   <head>
 5     <meta charset="utf-8">
 6     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible"  content="ie=edge">
 8     <title>Documenttitle>
 9     
10     <script src=" https://cdn.jsdelivr.net/npm/vue">script>  
11    
12     <script src="../lib/vue-router-3.0.6.js">script> 
13   head>
14 
15   <body>
16       <div id="app">
17       <a href="#/login">登录a>
18       <a href="#/register">注册a>
19 
20       
21       
22       <router-view>router-view>
23       div>
24 
25       <script>
26       //组件的模板对象
27       var login={
28         template:'

登录组件

' 29 } 30 31 var register={ 32 template:'

注册组件

' 33 } 34 35 /*Vue.component('login',{ 36 template: '

登录组件

'
37 })*/ 38 39 //2.创建一个路由对象,当导入vue-router 包治好,在window全局对象中,就有了一个路由的构造函数,叫做VueRouter 40 //在 new 路由对象的时候,可以为 构造函数,传递一个配合对象 41 var routerObj=new VueRouter({ 42 //route //这个配置对象中的route表示 【路由匹配规则】 的意思 43 routes:[//路由匹配规则 44 //每个路由规则,则都是一个对象,这个规则对象,身上,有两个必须的属性: 45 // 属性1 是path, 表示监听 哪个路由链接地址; 46 // 属性2 是component,表示,如果 路由是前面匹配到的path,则展示component属性对应的哪个组件 47 //注意:component 的属性值,必须是一个组件的模板对象,不能是 组件的引用名称; 48 {path:'/login',component:login}, 49 {path:'/register',component:register} 50 ] 51 }) 52 53 //创建 Vue 实例,得到 ViewModel 54 var vm = new Vue({ 55 el:'#app', 56 data:{ 57 msg:'' 58 }, 59 methods:{}, 60 router:routerObj //将路由规则对象,注册到 vm 实例上,用来监听 URL 地址的变化,然后展示对应的组件 61 }); 62 script> 63 body> 64 html>

 

转载于:https://www.cnblogs.com/songsongblue/p/11004420.html

你可能感兴趣的:(javascript)