vue2.0：（五）、路由vue-router

好的，接下来，我们来写路由。用的是vue2.0的路由。

步骤一：配置main.js

import Vue from 'vue';
import App from './App';
import router from './router';  <!------------------------这里引入的是router目录，会默认识别里面的index.js文件（不能是其他名字）


/*eslint-disable no-new*/
new Vue({       <!------------------------实例化vue对象配置选项路由及渲染App组件
    router,
    el:'#app',
    render: h => h(App)
})

步骤二：配置App.vue，写入组件

<template>
    <div id="aaa">
        <v-header></v-header>
        <div class="tab">
            <div class="tab-item">
                <router-link to="/goods">商品</router-link>  <!-------------------- 见下方知识点
            </div>
            <div class="tab-item">
                <router-link to="/ratings">评论</router-link>
            </div>
            <div class="tab-item">
                <router-link to="/seller">商家</router-link>
            </div>
        </div>
        <router-view></router-view>
        <div class="footer">
            im footer
        </div>
    </div>
</template>

<script>
  import header from './components/header/header.vue';

  export default{
      components:{
          'v-header':header
      }
  }
</script>

<style lang="less"></style>

　　注意：知识点哦，知识点：

　　1、使用 router-link 组件来导航

　 2、通过传入‘to’ 属性指定链接(与router/index.js的path属性相一致)

　　3、router-link 默认会被渲染成一个 <a>标签

　　4、路由匹配到的组件将渲染在 router-view 中。

步骤三：在router文件中创建路由并配置路由映射，通过export输出router到main.js文件中。

 import Vue from 'vue'; 
 import VueRouter from 'vue-router'; 
 import goods from './components/goods/goods.vue'; 
 import ratings from './components/ratings/ratings.vue'; 
 import seller from './components/seller/seller.vue'; 

 Vue.use(VueRouter); 

 const router = new VueRouter({ 
     mode: 'history', 
     linkActiveClass: 'active', 
     routes: [
     { path: '/goods',component: goods }, 
     { path: '/ratings', component: ratings }, 
     { path: '/seller', component: seller }, 
     { path: '*', redirect: '/goods' }
     ]
 });
 export default router;

　　注意：知识点哦，知识点：

　　1、mode设置为history表示利用了history.pushState API来完成URL跳转而无须重新加载页面。

　　2、linkActiveClass 设置当前选中项的样式类名

　　3、最重要的是routes(注意：不是routers，没有r)

　　　　1）、path 就是 router-link to后面跟的链接，注意保持一致；

　　　　2）、component 对应的组件，常见有两种写法：

　　　　　　　　a.第一种就是如上图。

　　　　　　　　b.第二种可以：

routes: [ { path: '/goods',component:require('../components/goods/goods.vue') }, { path: '/ratings', component: require('../components/ratings/ratings.vue') }]

　　　　 3) redirect是指重定向，将根路径重定向到指定路径。也就是默认路径是哪个。

　　　　本篇文章本来打算自己写的，后来在思考问题查资料的时候发现有一篇文章写的真是符合我的对这篇文章的期望，我就复制了他的文章。原文链接：https://www.cnblogs.com/smileTonya/p/6807385.html

秒客网

vue2.0：（五）、路由vue-router

相关文章