vue-router(续)

目录

1.动态路由

在某些情况下，一个页面的URL可能是不确定的，比如我们进入用户界面，希望网页是如下的路径
…/user/aaa或…/user/bbb
除了有前面的/user之外，后面还跟上了用户的ID
这种path和component的匹配关系，我们称之为动态路由

Home.vue

<template>
<h2>我是主页</h2>
</template>

<script>
export default {
  name: "home"
}
</script>

<style scoped>
</style>

About.vue

<template>
  <h2>我是关于</h2>
</template>

<script>
export default {
  name: "about"
}
</script>

<style scoped>
</style>

User.vue

<template>
  <div>
    <h2>我是用户</h2>
<!--index.js里面的routes有很多映射关系，$route获取的是当前状态下的那个-->
    <h2>用户名：{{$route.params.user_id}}</h2>
  </div>
</template>

<script>
export default {
  name: "User"
}
</script>

<style scoped>
</style>

App.vue

<template>
  <div id="app">
    <router-view></router-view>
    <router-link to="/home">首页</router-link>
    <router-link to="/about">关于</router-link>
    <router-link :to="'/user/'+userId">用户</router-link>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return{
      userId:'ZhangSan'
    }
  }
}
</script>

<style>
 .active{
  color: #f00;
 }
</style>

index.js

import Vue from 'vue'
import Router from 'vue-router'
import Home from '../components/Home'
import About from '../components/About'
import User from '../components/User'

Vue.use(Router)

const routes = [
  {
    path: '/',
    redirect: '/home'
  },
  {
    path:'/home',
    component: Home
  },
  {
    path:'/about',
    component: About
  },
  {
    path: '/user/:user_id',
    component: User
  }
]

export default new Router({
  routes,
  mode: 'history',
  linkActiveClass:'active'
})

main.js

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,       
  render: h => h(App)
})

效果：

2.路由的懒加载

在上面的基础上，npm run build项目打包后
生成了三个js文件如图
含app的js文件存放当前应用程序开发的所有代码
含manifest的文件是为打包的代码做底层支撑
含vendor的文件存放引用的一些第三方的东西

但是，当打包构建应用时，路由的许多页面都打包到一个js文件中，会造成这个页面非常大，如果我们一次性从服务器请求下来这个页面，要花一定的时间
如何才能更高效？
使用路由的懒加载
把路由对应的组件打包成一个个的js代码块，当路由被访问时才加载对应组件

src/router/index.js

import Vue from 'vue'
import Router from 'vue-router'

//懒加载的写法
const Home = ()=>import('../components/Home')
const About = ()=>import('../components/About')
const User = ()=>import('../components/User')

Vue.use(Router)

const routes = [
  {
    path: '/',
    redirect: '/home'
  },
  {
    path:'/home',
    component: Home
  },
  {
    path:'/about',
    component: About
  },
  {
    path: '/user/:user_id',
    component: User
  }
]

export default new Router({
  routes,
  mode: 'history',
  linkActiveClass:'active'
})

因为对三个组件进行了懒加载，所以打包后会多出三个js文件

3.路由的嵌套

在home页面中，我们希望通过/home/news和/home/message访问一些内容
一个路径映射一个组件，访问这两个路径也会分别渲染两个组件

实现步骤：
①创建对应子组件
HomeNews.vue

<template>
<div>
  <ul>
    <li>新闻1</li>
    <li>新闻2</li>
    <li>新闻3</li>
    <li>新闻4</li>
  </ul>
</div>
</template>

<script>
export default {
  name: "HomeNews"
}
</script>

<style scoped>
</style>

HomeMessage.vue

<template>
<div>
  <ul>
    <li>消息1</li>
    <li>消息2</li>
    <li>消息3</li>
    <li>消息4</li>
  </ul>
</div>
</template>

<script>
export default {
  name: "HomeMessage"
}
</script>

<style scoped>
</style>

②在路由映射中配置对应的子路由
src/router/index.js

import Vue from 'vue'
import Router from 'vue-router'

const Home = ()=>import('../components/Home')
const About = ()=>import('../components/About')
const User = ()=>import('../components/User')
const HomeNews = ()=>import('../components/HomeNews')
const HomeMessage = ()=>import('../components/HomeMessage')

Vue.use(Router)

const routes = [
  {
    path: '/',
    redirect: '/home'
  },
  {
    path: '/home',
    component: Home,
    children: [
      {
        path: '',
        redirect: 'news'
      },
      {
        path: 'news',
        component: HomeNews
      },
      {
        path: 'message',
        component: HomeMessage
      }
    ]
  },
  {
    path:'/about',
    component: About
  },
  {
    path: '/user/:user_id',
    component: User
  }
]

export default new Router({
  routes,
  mode: 'history',
  linkActiveClass:'active'
})

③在父组件内部使用<router-view>标签
Home.vue

<template>
  <div>
    <h2>我是主页</h2>
    <router-link to="/home/news">新闻</router-link>
    <router-link to="/home/message">消息</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "home"
}
</script>

<style scoped>
</style>

效果：