Vue - 基本路由的使用

一、导入包

注意：导入的包要在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;
    }

结果如下：