cli3 vue-router-------路由的配置及使用方法

一.什么是vue-router

vue-router路由插件，这里的路由并不是指我们平时所说的硬件路由器，这里的路由就是SPA（单页应用）的路径管理器。再通俗的说，vue-router就是我们WebApp的链接路径管理系统。

二.vue-router安装

npm install vue-router --save-dev

三.在src文件夹中创建routes.js配置文件，配置路由的映射关系

import ShowBlog from "./components/ShowBlog"
import AddBlog from "./components/AddBlog"
import SingleBlog from "./components/SingleBlog"

export default [

    {
        path:"",
        redirect: "/add"
    },
    {
        path:"/show",
        component: ShowBlog
    },
    {
        path:"/add",
        component:AddBlog
    },
    {
        path:"/blog/:id",
        component:SingleBlog,
    }
]

四.在main.js文件中引入路由和路由配置

import VueRouter from 'vue-router'//引入路由
//引入路由配置
import Routes from './routes'

五.使用vue-route，并实例化注册

Vue.use( VueRouter)
const router=new VueRouter({
    routes:Routes,
    mode:"history"//去掉url中的#

})
new Vue({
  render: h => h(App),
    router:router//注册路由
}).$mount('#app')

完毕