vue-router路由的参数和设计 / 网络研习社#15

lemooljiang (73)in #cn • 5 years ago

到了路由功能了。路由分前端路由和后端路由，这里先来看前端。vue有个好用的插件vue-router来解决路由的麻烦，它与组件配合就能很好地组织网页了。

vue-router基本使用：

<script src="./lib/vue-router.js"></script>  //先是引包

<div id="app">
    <router-link to="/login">login</router-link>
    <router-link to="/register">register</router-link>
    <router-view></router-view>
</div>

<script>
    var login = {
        template: '<h1>login组件</h1>'
    }
    var register = {
        template: '<h1>register组件</h1>'
    }
    var router = new VueRouter({
        routes: [
            {path: '/', redirect: '/login'},
            {path: '/login', component: login} , //必须是模板对象，不能是组件名称
            {path: '/register', component: register}
            ]
    })
    var app = new Vue({
        el: '#app',
        router
      })
</script>

vue-router切换时的当前路径的高亮显示：

<style>
    .router-link-active{
        color:red;
    }
</style>

vue-router路由传参：

1、$route.query
<router-link to="/login?id=10">login</router-link>

var login = {
          template: '<h1>login组件---{{ $route.query.id }}</h1>',
          created () {
              console.log(this.$route.query.id)
          }
      }

2、$route.params
<router-link to="/login/10">login</router-link>

var login = {
          template: '<h1>login组件---{{ $route.params.id }}</h1>',
          created () {
              console.log(this.$route.params.id)
          }
      }

 var routerObj = new VueRouter({
          routes: [
              {path: '/login/:id', component: login} ,
              {path: '/register', component: register}
              ]
      })

子路由（路由嵌套）的设计

<div id="app">
    <router-link to="/login">login</router-link>
    <router-link to="/register">register</router-link>
    <router-view></router-view>
</div>

<template id="tmp">
    <div>
        <router-link to="/register/weibo">微博注册</router-link>
        <router-link to="/register/phone">手机注册</router-link>
        <router-view></router-view>
    </div>
</template>

var login = {
    template: '<h1>login组件</h1>'
}
var weibo = {
    template: '<h1>weibo组件</h1>'
}
var phone = {
    template: '<h1>phone组件</h1>'
}
var register = {
    template: '#tmp'
}

var router = new VueRouter({
    routes: [
        {path: '/', redirect: '/login'},
        {path: '/login', component: login} ,
        {path: '/register', component: register,
          children: [
              {path: 'weibo',component: weibo},
              {path: 'phone',component: phone}
          ]
        }
        ]
})

命名视图布局(name指定组件名)，多个组件布置

<div id="app">
    <router-view></router-view>
    <router-view name="left"></router-view>
    <router-view name="main"></router-view>
</div>

var header= {
  template: '<h1>header组件</h1>'
}
var left = {
  template: '<h1>left组件</h1>'
}
var main = {
  template: '<h1>main组件</h1>'
}

var router = new VueRouter({
  routes: [
      {path: '/', components: {
          default: header,
              left: left,
              main: main
          }}
      ]
})

网络研习社系列文章：