Vue 路由vue-router的基本使用

1. 安装路由模块

<!-- 1. 安装vue-router 路由模块 -->
    <script src="vue-router.js"></script>

2. 创建路由对象

 //  组件的模板对象
       var login = {
           template: '<h1>登录组件</h1>'
       }

       var register = {
           template: '<h1>注册组件</h1>'
       }
       // 2. 创建一个路由对象， 当导入 vue-router 包之后， 在window 全局对象中，就有了一个路由的构造函数 VueRouter
       // 在 new 路由对象的时候，可以为构造函数传递一个配置对象
       var routerObj = new VueRouter ({
           // route 这个配置对象中的route 表示 【路由匹配规则】 的意思
           routes: [ // 路由匹配
           // 每个路由匹配规则，都是一个规则对象，这个规则对象身上有两个必须的属性
           //  属性1 : path ，表示监听哪个路由链接地址
           //  属性2 : component，表示如果路由是前面匹配到的path，则展示 component属性对应的那个组件
           { path: '/login', component: login},  // component 的属性值，必须是一个组建的模板对象，不能是组件的引用名称 Vue.component('login',{})  // 此处的login为组件名称
           { path: '/register', component: register}

           ]
       })

3. 将路由对象注册到vm实例上

      var vm = new Vue ({
           el: '#app',
           data: {},
           methods: {},
           router: routerObj   //  3.将路由规则对象，注册到 vm 实例上，用来监听 url 地址的变化，然后展示对应的组件
       })

触发url 地址改变 >>> 路由监听到 url 改变 >>> 匹配路由规则

<div id="app">
       <a href="#/login">登录</a>
       <a href="#/register">注册</a>
       <!-- 这是vue-router提供的元素，专门用来当做占位符的，将来路由规则匹配到的组件，就会展示到这个 router-view 中去
       所以可将vue-router认为是一个占位符 -->
       <router-view></router-view>
   </div>

其中 a 链接部分也可用 router-link 来代替

 <!--  router-link 默认渲染为一个 a 标签 -->
 <router-link to="/login">登录</router-link>
 <router-link to="/register">注册</router-link>     

也可通过 tag 来改变默认标签

<router-link to="/login" tag="span">登录</router-link>

如何使页面一开始便定位到某个组件，而不是显示空白 >>> 采用redirect

{ path: '/', redirect: '/login'},
{ path: '/login', component: login},  
{ path: '/register', component: register}