Contents

#一、导入包
注意：导入的包要在vue下边

<title>基本路由的使用</title>
<script src="./lib/vue-2.4.0.js"></script>
<script src="./lib/vue-router-3.0.1.js"></script>

#二、创建子组件
注意：是在vm实例上边创建

var login = {
    template: '<h3>这是登录子组件，这个组件是 奔波霸 开发的。</h3>'
}
var register = {
    template: '<h3>这是注册子组件，这个组件是 霸波奔 开发的。</h3>'
}

#三、创建一个路由对象
创建路由对象，当导入包之后，在window全局对象中有路由构造函数–VueRouter，在new路由对象时，可以为构造函数传递一个配置对象。

---

注意1：这个配置对象中的route表示路由匹配规则，每个路由规则，都是一个对象，这个规则对象都有必须的两个属性
1.path，表示监听哪个路由链接的地址
2.component，表示如果路由是前面匹配到的path，则展示component属性对应的那个组件
注意2：component的属性值，必须为一个组件的模板对象，不能是组件的引用名称

var router = new VueRouter({
    routes: [ //路由规则数组
        {path: '/login', component: login},
        {path: '/register', component: register}
    ]
})

#四、创建 Vue 实例，得到 ViewModel
将路由规则对象注册到vm实例上，用来监听url地址变化，并展示相应的组件
法一：

var vm = new Vue({
  el: '#app',
  data: {},
  methods: {},
  router
});

法二：

var vm = new Vue({
  el: '#app',
  data: {},
  methods: {},
  router: router
});

#五、在页面中导入容器
由VueRouter提供的元素，用来做占位符，由路由规则匹配到的组件来展示。

<div id="app">
      <router-link to="/login">登录</router-link>
      <router-link to="/register">注册</router-link>

      <router-view></router-view>
</div>

注意：router-link默认类似于a标签

####可以利用tag来修改

<div id="app">
      <router-link to="/login" tag="span">登录</router-link>
      <router-link to="/register">注册</router-link>

      <router-view></router-view>
</div>

最终页面结果：

#六、重定向设置初识打开的页面

var router = new VueRouter({
     routes: [ //路由规则数组
         {path: '/',redirect:'/login'},
         {path: '/login', component: login},
         {path: '/register', component: register}
     ],
   // linkActiveClass: 'myactive' // 和激活相关的类
 })

结果：
打开页面就是我们设置的login，包括导航栏地址

#七、给路由设置样式

var router = new VueRouter({
    routes: [ //路由规则数组
        {path: '/',redirect:'/login'},
        {path: '/login', component: login},
        {path: '/register', component: register}
    ],
   linkActiveClass: 'myactive' // 和激活相关的类
})

  .router-link-active,
  .myactive {
  color: red;
  font-weight: 800;
  font-style: italic;
  font-size: 80px;
  text-decoration: underline;
  background-color: green;
}

结果如下：