Vue_02_vue-router的基本使用_02 vueruoter的基本使用-优快云博客

本文链接：https://blog.youkuaiyun.com/LycLhsYYY/article/details/106683671

Vue-router

官方地址
在web中，路由分前端路由和后端路由。在后端路由中，每个URL都对应着服务器的一个资源；前端路由则负责实现页面跳转，不与服务器做交互。在大型单页面应用中，使用Vue配合Vue-router插件，可以很好的实现前端路由的跳转，让构建单页面应用变的简单

vue-router原理

通过3种方法实现路由跳转
①：hash，默认（#）
②：history，HTML5新特性，比较新颖
③：abstract，用于非浏览器环境（node）
浅谈vue-router原理

基本使用

引入vue-router、vue。vue-router依赖vue，所以，vue必须在前面引用

<script src="../vue.js"></script>
<script src="../vue-router.js"></script>

通过VueRouter构造函数，创建router对象

// 通过VueRouter构造函数，创建router对象
  var routerObj = new VueRouter({
    routes: [
    	// route对象 
      {
        path: '/',
        redirect: '/login' //将根路径重定向到/login
      },
      {
        path: '/login',
        // 组件对象
        component: {
			template: '<h1>登陆组件</h1>'
		}
      },
      {
        path: '/register',
        component: {
          template: '<h1>注册组件</h1>'
        }
      }
    ]
  })

将创建的router对象注册到vue实例的router对象中

var vm = new Vue({
    el: '.app',
    router: routerObj
  })

在HTML中通过<router-link to="pathname">、<router-view>，标签使用

<div class="app">
    <router-link to="/login">登陆</router-link>
    <router-link to="/register">注册</router-link>
    <router-view></router-view>
  </div>

路由的传参

使用query对象传参

下面代码将匹配’？'后面的参数，以对象的方式加入到路由组件的$router的query对象中

<body>
  <div class="app">
    <router-link to="/login?name=ZZZ">登陆</router-link>
    <router-view></router-view>
  </div>
</body>
<script>
  var router = new VueRouter({
    routes: [
      {
        path: '/login',
        component: {
          template: '<h1>name---{{$route.query.name}}</h1>',
          created() {
            console.log(this)
          }
        }
      }
    ]
  })
  var vm = new Vue({
    el: '.app',
    router
  })
</script>

组件对象的$route属性

使用params对象传参

在定义route对象的path时，将params对象用:name语法定义好。router-link的to属性会完全匹配path路径

<body>
  <div class="app">
    <router-link to="/login/1/LYC">登陆</router-link>
    <router-view></router-view>
  </div>
</body>
<script>
  var router = new VueRouter({
    routes: [
      // 对path属性完全匹配
      {
        path: '/login/:id',
        component: {
          template: '<h1>name---{{$route.params.id}}</h1>',
          created() {
            console.log(this)
          }
        }
      },
      {
        path: '/login/:id/:name',
        component: {
          template: '<h1>name---{{$route.params.id}}---{{$route.params.name}}</h1>',
          created() {
            console.log(this)
          }
        }
      }
    ]
  })
  var vm = new Vue({
    el: '.app',
    router
  })
</script>

组件对象的$route属性

路由模块的嵌套

有时我们有这样的需求，一个路由的显示条件，还得基于另一个路由显示。即一个页面的URL是唯一的，但是一个页面有时不能只显示一个路由模块，这时需要用到路由的嵌套。使用route对象的children属性

<body>
  <div class="app">
    <router-link to="/parent">父模块</router-link>
    <router-view></router-view>
  </div>
  <template id="temp">
    <div>
      <h1>父模块内容</h1>
      <router-link to="/parent/children1">子模块1</router-link>
      <router-link to="/parent/children2">子模块2</router-link>
      <router-view></router-view>
    </div>
  </template>
</body>
<script>
  var router = new VueRouter({
    routes: [
      {
        path: '/parent',
        component: {
          template: '#temp'
        },
        children: [
          {
            path: 'children1',
            component: {
              template: '<h3>子模块1内容</h3>'
            }
          },
          {
            path: 'children2',
            component: {
              template: '<h3>子模块2内容</h3>'
            }
          }
        ]
      }
    ]
  })
  var vm = new Vue({
    el: '.app',
    router
  })
</script>

多个路由显示

一个页面的URL是唯一的，有时我们一个URL需要显示多个router模块，使用route对象的components即可实现

<body>
  <div class="app">
    <router-link to="/url">一个URL</router-link>
    <router-view></router-view>
    <router-view name="router1"></router-view>
    <router-view name="router2"></router-view>
  </div>
</body>
<script>
  var router = new VueRouter({
    routes: [
      {
        path: '/url',
        components: {
          default: {
            template: '<h1>默认路由模块</h1>'
          },
          router1: {
            template: '<h1>路由模块1</h1>'
          },
          router2: {
            template: '<h1>路由模块2</h1>'
          }
        }
      }
    ]
  })
  var vm = new Vue({
    el: '.app',
    router
  })
</script>