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标签

类似a标签

可以利用tag来修改

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

        <router-view></router-view>
  </div>
修改为span

最终页面结果:


image.png

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

   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;
    }

结果如下:


设置样式

推荐阅读更多精彩内容

  • 今天出门的时候真的感觉压力好大,昨天和前天连单页都没有发出去,回想一下第一天发了12张,第二天发了45张,虽然...
    小坤Fineyoga阅读 64评论 4 1
  • 它是海,最忠实的倾听者。 下午四点半左右,太阳还没有要落山的意思,此时阳光正好,便不觉得侧面吹来的风有多么凉了。 ...
    苒思阅读 79评论 0 0
  • 老大今年上幼儿园中班,比起开学日朋友圈里那些哭闹着不去上幼儿园的孩子,他并没有那么厉害,他只是,不那么喜欢上幼...
    haha静阅读 192评论 1 1
  • 误尽江南多少花,浮山一带隔天涯; 闲来看罢当年柳,醉入春城第几家? (平水韵下平六麻)
    柏拉图之阅读 954评论 18 33