1、创建路由
import Vue from 'vue' import VueRouter from 'vue-router'
//1 注册插件 Vue.use(VueRouter) const routes = [ { path: '', redirect: '/home' }, { path: '/home', component: Home, meta: { title: '首页' }, children: [ { path: '', redirect: 'news' }, { path: 'news', component: HomeNews }, { path: 'message', component: HomeMessage } ] }, { path: '/about/:id', component: About, meta: { title: '关于' } }, { path: '/profile', component: Profile, meta: { title: '档案' } } ] //2 创建路由 const router = new VueRouter({ routes, mode: 'history' }) //3 导出路由 然后再入口文件 进行注册 export default router
2、配置路由
import Vue from 'vue' import VueRouter from 'vue-router' const Home = () => import('../components/Home') const About = () => import('../components/About') const Profile = () => import('../components/Profile') const HomeNews = () => import('../components/HomeNews') const HomeMessage = () => import('../components/HomeMessage') Vue.use(VueRouter) const routes = [ { path: '', redirect: '/home' }, { path: '/home', component: Home, meta: { title: '首页' }, children: [ { path: '', redirect: 'news' }, { path: 'news', component: HomeNews }, { path: 'message', component: HomeMessage } ] }, { path: '/about/', component: About, meta: { title: '关于' } }, { path: '/profile', component: Profile, meta: { title: '档案' } } ] const router = new VueRouter({ routes, mode: 'history' }) export default router
3、在App.vue进行设置
<router-link to="/home">首页</router-link> <router-link to="/about">关于</router-link> <router-view></router-view>
4、路由跳转
<template> <div id="app"> <button @click="homeClick">首页</button> <button @click="aboutClick">关于</button> <router-view></router-view> </div> </template> <script> export default { name: 'App', methods: { homeClick() { this.$router.push('/home') }, aboutClick() { this.$router.push('/about') } } } </script> <style> </style>
5、路由传参有2中方式 params和query
5.1 params传递 分为几步
第一步: 配置路由格式 (这里的id并不是唯一,你也可以为其定义aaa,bbbb等等 都可以)
path: '/about/:id',
component: About,
第二步
<template> <div id="app"> <button @click="homeClick">首页</button> <button @click="aboutClick">关于</button> <router-view></router-view> </div> </template> <script> export default { name: 'App', data() { return { userId: 'zhangsan' } }, methods: { homeClick() { this.$router.push('/home') }, aboutClick() { this.$router.push('/about/'+this.userId) } } } </script> <style> </style>
效果如下:
而且我们也可以在关于当前页面拿到这个id 格式如下:
<template> <div> <h2>我是关于的内容</h2> <ul> <li>关于内容</li> <li>关于内容</li> <li>关于内容</li> <li>关于内容</li> </ul> {{$route.params.id}} </div> </template> <script> export default { name: 'About', }
5.2 query方式进行传参
this.$router.push({ path: '/profile', query: {name: 'james', age: 18, height: 199} })