目录结构
目录结构.png
App.vue文件
<template>
<div id="app">
<div id="nav">
<router-link :to="{name:'home'}">Home</router-link> |
<router-link to="/about">About</router-link> |
<router-link :to="{name:'news',params:{id:111} }">news</router-link> |
<router-link to="/demos/demo123">demos</router-link>
</div>
<hr>
<span @click="jumpHome">首页</span>
<span @click="jumpAbout">其他</span>
<router-view/>
</div>
</template>
<script>
export default {
name:'App',
methods:{
jumpHome(){
console.log(this);
this.$router.push('/')
},
jumpAbout(){
console.log(this);
this.$router.push('/about')
}
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
#nav {
padding: 30px;
}
#nav a {
font-weight: bold;
color: #2c3e50;
}
#nav a.exact-active {
color: #42b983;
}
span{
color: #42b983;
cursor: pointer;
}
</style>
一 . router-link 其实就是对 跳转链接的封装 默认的标签是 a标签
属性:
1.to 跳转链接
2.tag 可以改其他标签 如(span等):
router-link tag='span' to="/home">home</router-link>
默认类名:
1.router-link-exact-active
当对应的路由匹配成功时, 会自动给当前 router-link 加上该类名
在url路径后有 /
2.router-link-exact-active
只是在精准匹配下才会出现的 (/home)
router-link-exact-active
router-link-active
二 . <router-view/> 显示窗口
简单理解 一个标签就是一个窗口 (页面)
main.js文件
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
Vue.use(Router);
export default new Router({
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
}
]
})
懒加载
当打包构建应用时，Javascript 包会变得非常大，影响页面加载。
如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了
主要代码块 ↓
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
这一注释就是在点击 about的时候可以网页加载时的名
/* webpackChunkName: "about" */
引入的组件路径
'./views/About.vue'
懒加载的方式(推荐方式三)
方式一: 结合Vue的异步组件和Webpack的代码分析.
const Home = resolve => { require.ensure(['../components/Home.vue'],
() => { resolve(require('../components/Home.vue')) }
)};
方式二: AMD写法
const About = resolve => require(['../components/About.vue'], resolve);
方式三: 在ES6中, 我们可以有更加简单的写法来组织Vue异步组件和Webpack的代码分割.
const Home = () => import('../components/Home.vue')
