VUE----脚手架2.0下路由的使用

vue-router是vue.js官方的路由管理器
(我测试使用脚手架版本是Vue 2，环境是win10)

1.下载vue-router:

npm install vue-router --save

2.准备工作：

1.在src目录下新建view文件夹

2.在src/view目录下创建4个组件，以供路由跳转测试使用 组件结构 3.组件代码示例：

<template>
    <div>
        <h1>我是首页组件</h1>
    </div>
</template>

<script>
    export default {
        name:'Index'
    }
</script>

<style scoped></style>

3.创建路由文件：

1.在src目录下新建router文件夹
2.在router文件夹下新建index.js文件：

//1.引入vue和路由..
        import Vue from 'vue'
        import VueRouter from 'vue-router'
//2.注册路由..
        Vue.use(VueRouter)
//3.使用懒加载引入组件..
        const Index   = () =>import('../view/tabbar/Index')
        const Type    = () =>import('../view/tabbar/Type')
        const Cart    = () =>import('../view/tabbar/Cart')
        const Profile = () =>import('../view/tabbar/Profile')
//4.定义路由映射..
        const routes = [
            {
                path:'',
                redirect:'/index'        //初始页重定向到首页
            },
            {
                path:'/index',
                component:Index
            },
            {
                path:'/type',
                component:Type
            },
            {
              path:'/cart',
               component:Cart
            },
            {
                path:'/profile',
                component:Profile
            }
        ]
//5.实例化路由..
        const router = new VueRouter({
            routes,
            mode:'history'        //默认hash，将其修改成history
      })
//6.导出路由..
        export default router

4.引用路由：

在main.js中引用路由： 引用截图

5.使用路由：

vue的路由并不是a标签，而是router-link,并且需要设置router-view容器，示例代码：

<div>
        <router-link to="/index">首页|</router-link>
        <router-link to="/type">分类|</router-link>
        <router-link to="/cart">购物车|</router-link>
        <router-link to="/profile">我的</router-link>
        <router-view></router-view>
</div>

样式： 样式截图

6.至此一个最基本的路由使用就完成了