一、当前项目目录
二、首先编写模板文件
2.1、入口文件HTML中的主组件为App.vue
App.vue代码如下:
<template>
<div id='app'>
<v-header></v-header>
<div class='tab'>
<div class='tab-item'>
<router-link :to="{name:'goods'}">商品</router-link>
</div>
<div class='tab-item'>
<router-link :to="{name:'ratings'}">评论</router-link>
</div>
<div class='tab-item'>
<router-link :to="{name:'seller'}">商家</router-link>
</div>
</div>
<keep-alive>
<router-view></router-view>
</keep-alive>
</div>
</template>
<script>
//引入子组件header.vue
import header from './components/header/header.vue';
export default {
name:'app',
//引入子组件
components:{'v-header':header}
}
</script>
<style scope>
/*flex盒子布局 其中兼容性写法由vue-loader中的postcss去解决兼容问题*/
#app .tab{
display: flex;
width:100%;
height:40px;
line-height: 40px;
}
.tab .tab-item{
flex:1;
text-align: center;
}
</style>
- 子组件v-header的路径为:./components/header/header.vue ,主要编写商品头部模块
- router-link 这里使用路由的名字来链接到一个路由,需要在路由配置中添加name属性为导航名。
也可以使用原始的路径链接路由:
<router-link to="/goods">商品</router-link>
- keep-alive的作用:
keep-alive可以缓存数据,这样不至于重新渲染路由组件的时候,之前那个路由组件的数据被清除了。比如对当前的路由组件a进行了一些DOM操作之后,点击进入另一个路由组件b,再回到路由组件a的时候之前的DOM操作还保存在,如果不加keep-alive再回到路由组件a时,之前的DOM操作就没有了,得重新进行。如果你的应用里有一个购物车组件,就需要用到keep-alive。
2.2主文件main.js
第一步、引入路由模块vue-router,
引入路由组件,使用模块化机制编程,引入Vue和VueRouter,要调用 Vue.use(VueRouter)进行全局注册,之后可以使用vue-router的方法.
第二步、每个页面都设置不同页面标题title. 命名路由且使用导航钩子函数
第三步、进入应用时就渲染其中某个路由组件。
有种是重定向const routes = [
{path:’/’,redirect:’/goods’}] , 还有一种是导航式编程router.push(‘/goods’)
main.js代码如下:
//引入依赖模块
import Vue from 'vue';
import VueRouter from 'vue-router';
import $ from 'jquery';
import './assets/css/bootstrap.min.css';
import './assets/js/bootstrap.min.js';
//引入主路由组件
import App from './App';
//引入路由组件
import goods from './components/goods/goods'
import ratings from './components/ratings/ratings'
import seller from './components/seller/seller'
//设置为 false 以阻止 vue 在启动时生成生产提示
Vue.config.productionTip = false;
//引入VueRouter,模块化
Vue.use(VueRouter);
//定义路由
const routes = [
//也可以是一个命名的路由 redirect:{name:'goods'}
{path:'/',redirect:'/goods'},
{ path: '/goods', component: goods,name:'goods' },
{ path: '/ratings', component: ratings,name:'ratings' },
{ path: '/seller', component: seller,name:'seller' }
];
//创建路由实例
const router = new VueRouter({
// ES6缩写语法,相当于routes:routes
routes
});
//结合路由命名,设置导航钩子函数
router.afterEach((to,from,next)=>{
document.title = to.name;
})
//创建vue实例并挂载
const app = new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
});
//router.push('/goods');