vue路由（router）---基础

本篇总结vue路由的基础。

一、特点：
1、Vue.js 路由允许我们通过不同的 URL 访问不同的内容。
2、通过 Vue.js 可以实现多视图的单页Web应用（single page web application，SPA）。
3、Vue.js 路由需要载入 vue-router 库。

二、安装
方式一：直接下载
https://unpkg.com/vue-router/dist/vue-router.js

方式二（推荐）：npm淘宝镜像

cnpm install vue-router

三、引入、配置
引入路由

import vueRouter from 'vue-router'

挂载到vue

//挂载到vue
Vue.use(vueRouter);

引入组件

//引入路由组件
import Home from './component/fourpage/home'
import Productor from './component/fourpage/productor'
import Active from './component/fourpage/active'
import My from './component/fourpage/my'
import Prodetail from './component/detail/prodeatil'
import Cart from './component/smallcomponent/cart'

配置路径

let router=new vueRouter({
  // 进行配置
  routes:[
    // 配置页面路由
    //路由默认显示路径是hsl路径
    //配置首页
    {
      name:"home",
      path:"/",
      component:Home
    }
    ]
    });

四、生成路由出入口
入口：通过to属性传入组件路径

//页内路由
<router-link to="home">Home</router-link>

渲染：

<a href="home">Home</a>

出口：

<router-view></router-view>

五、路由前进回退

goback(){
   this.$rout.go(1)//-1后退，1前进
}

六、总结
本篇介绍了vue的路由基础，后面介绍路由里的其他知识。