Vue-Router的使用

在Vue中，使用路由进行页面之间的跳转。
1：npm安装路由插件：

npm install vue-router

2:在main.js中引入路由：

import VueRouter from 'vue-router'
Vue.use(VueRouter)
// 创建路由
const router=new VueRouter({
  routes:Routes,
  // mode:"history"去掉地址的#
  mode:"history"
})

3:在跳转.vue文件中，采用router-link标签实现跳转，相当于html中的超链接：

<router-link to="/" exact>博客</router-link>
<router-link to="/add" exact>写博客</router-link>

4：在router.js文件中引入组件并设置跳转路径：

import ShowBlogs from './components/ShowBlogs.vue'
import AddBlog from './components/AddBlog.vue'
import SingleBlog from './components/SingleBlog.vue'
export default[
    {path:"/",component:ShowBlogs},//name可以省略
    {path:"/add",component:AddBlog},
    // 设置一个id拼接每一篇博客的网址
    {path:"/blog/:id",component:SingleBlog}
]
// 路由参数：在当前网页地址后面拼上不同地址