腾讯云

文章/答案/技术大牛

发布

社区首页 >专栏 >Vue 06.路由

Vue 06.路由

LittlePanger

发布于 2020-04-14 07:46:33

57200

代码可运行

文章被收录于专栏：LittlePanger的代码之路LittlePanger的代码之路

运行总次数：0

代码可运行

路由

定义

对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源；
对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现；
在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由（区别于后端路由）；

vue-router

导入 vue-router 组件类库

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

使用 router-link 来导航，默认渲染一个a标签，可以通过tag属性渲染成其他标签

<router-link to="/login">登录</router-link>
<router-link to="/register">注册</router-link>

使用 router-view 来显示匹配到的组件，可以理解为一个占位符

<router-view></router-view>

创建组件

var login = {
  template: '<h1>登录组件</h1>'
}

var register = {
  template: '<h1>注册组件</h1>'
}

// 或

var login = Vue.extend({
  template: '<h1>登录组件</h1>'
});

var register = Vue.extend({
  template: '<h1>注册组件</h1>'
});

创建路由 router 实例，通过 routers 属性来定义路由匹配规则

每个路由规则都是一个对象且都有两个属性

path：表示监听哪个路由链接地址；
component：表示path匹配后，展示 component 属性对应的组件
注意： component 必须是组件的模板对象，不是组件的引用名称

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

使用 router 属性来使用路由规则

var vm = new Vue({
  el: '#app',
  router: routerObj 
  // 将路由规则对象，注册到 vm 上，监听 URL 地址的变化，然后展示对应的组件
});

重定向

路由匹配规则可以设置重定向到某个其他路由

{ path: '/', redirect: '/login' }
// 这里的 redirect 和后端的 redirect 完全是两码事

设置路由高亮

设置当前路由下的router-link链接的高亮（或其他样式）有两种方式

第一种：通过给默认激活的类加样式，即给router-link-active类加

第二种：给路由对象设置linkActiveClass属性，然后给设置的类名加样式

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

设置路由切换动画

将router-view标签放到transition标签内部，然后设置动画样式

<transition mode="out-in">
    <router-view></router-view>
</transition>

路由传参

1.通过route

路径中使用查询字符串，不需要修改路由规则的path属性

<router-link to="/login?id=10&name=zs">登录</router-link>

通过this.$route.query获取路由中的参数

var login = {
  template: '<h1>登录 --- {{ $route.query.id }} --- {{ $route.query.name }}</h1>',
}

2.通过params

修改路由匹配规则的path属性

{ path: '/register/:id/:name', component: register }

路径

<router-link to="/register/12/ls">注册</router-link>

通过 this.$route.params来获取路由中的参数：

var register = {
  template: '<h1>注册组件 --- {{this.$route.params.id}}</h1>'
};

路由嵌套

使用路由匹配规则对象的 children 属性实现路由嵌套

下面例子功能为，点击/account的导航链接后，展示account组件，该组件包括登录注册导航链接和登录注册的组件，即登录注册组件属于account组件

<div id="app">
  <router-link to="/account">Account</router-link>
  <router-view></router-view>
</div>

<template id="tmpl">
  <div>
    <h1>这是 Account 组件</h1>

    <router-link to="/account/login">登录</router-link>
    <router-link to="/account/register">注册</router-link>

    <router-view></router-view>
  </div>
</template>

// 组件的模板对象
var account = {
  template: '#tmpl'
}

var login = {
  template: '<h3>登录</h3>'
}

var register = {
  template: '<h3>注册</h3>'
}

var router = new VueRouter({
  routes: [
    {
      path: '/account',
      component: account,
      // 使用 children 属性实现子路由，子路由路径不带/
      children: [
        { path: 'login', component: login },
        { path: 'register', component: register }
      ]
    }
  ]
})

// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
  el: '#app',
  data: {},
  methods: {},
  router
});

命名视图

通过命名视图，实现一个URL同时存在多个组件

eg：经典布局，即页面分为头部，左侧，主体

HTML

<div id="app">

  <router-view></router-view>
  <div class="container"> 
    <!--  这个div实现上(头)下(左+主)分层  -->
    <router-view name="left"></router-view>
    <router-view name="main"></router-view>
  </div>

</div>

var header = {
  template: '<h1 class="header">Header头部区域</h1>'
}

var leftBox = {
  template: '<h1 class="left">Left侧边栏区域</h1>'
}

var mainBox = {
  template: '<h1 class="main">mainBox主体区域</h1>'
}

// 创建路由对象
var router = new VueRouter({
  routes: [
    {
      path: '/', 
      components: { //这是components不是之前的component
        'default': header,  
        // 所有没有name属性的router-view标签都会被default
        'left': leftBox,
        'main': mainBox
      }
    }
  ]
})

// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
  el: '#app',
  data: {},
  methods: {},
  router
});

html,
body {
  margin: 0;
  padding: 0;
}

.header {
  background-color: orange;
  height: 80px;
}

h1 {
  margin: 0;
  padding: 0;
  font-size: 16px;
}

.container {
  display: flex;
  height: 600px;
}

.left {
  background-color: lightgreen;
  flex: 2;
}

.main {
  background-color: lightpink;
  flex: 8;
}

通过watch属性监听路由对象的改变

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

    <router-view></router-view>
</div>

var login = Vue.extend({
  template: '<h1>登录组件</h1>'
});

var register = Vue.extend({
  template: '<h1>注册组件</h1>'
});

var router = new VueRouter({
  routes: [
    { path: "/login", component: login },
    { path: "/register", component: register }
  ]
});

// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
  el: '#app',
  data: {},
  methods: {},
  router: router,
  watch: {
    '$route': function (newVal, oldVal) {
      if (newVal.path === '/login') {
        console.log('这是登录组件');
      }
    }
  }
});