一. 配置路由的跳转(路由的跳转使用标签router-link)
<router-link></router-link>替换版本中的a标签
1、知道路径的跳转
<ul>
<li><router-link to="/">Hello页面</router-link></li>
<li><router-link to="/word">word页面</router-link></li>
</ul>
<!-- 定义路由插座 -->
<router-view></router-view>
2、to是通过绑定数据到上面
...
<ul>
<li><router-link to="/">Hello页面</router-link></li>
<li><router-link :to="word">word页面</router-link></li>
</ul>
<!-- 定义路由插座 -->
<router-view></router-view>
...
<script>
export default{
name:'app',
data(){
return{
title:'我是项目主入口',
word:'/word'
}
}
}
</script>
二、重定向 redirect
const routes = [
{ path: '/', redirect: '/index'}, //这样进/ 就会跳转到/index
{ path: '/index', component: index}
]
三、嵌套路由
const routes = [
{ path: '/index', component: index,
children: [
{ path: 'info', component: info}
]
}
]
四、懒加载
const routes = [
{ path: '/index', component: resolve => require(['./index.vue'], resolve) },
{ path: '/hello', component: resolve => require(['./hello.vue'], resolve) },
]
通过懒加载就不会一次性把所有组件都加载进来，而是当你访问到那个组件的时候才会加载那一个。对于组件比较多的应用会提高首次加载速度
