一、导入包

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

结果如下:
设置样式

Logo

前往低代码交流专区

更多推荐