饿了么项目---3、vue-router 2.0版本的使用

一、当前项目目录

二、首先编写模板文件

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');