在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}
]
// 路由参数:在当前网页地址后面拼上不同地址