一.什么是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')
完毕