在使用vue-router之前要先引入:
cnpm/npm install vue-router --save
引入之后就可以在组件之间使用路由进行跳转,首先建立两个组件titleHeader和homeHeader,和他们下面的内容路由文件titleContent和homeContent,再然后在main.js中引入vue-router,
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import titleHeader from './components/titleHeader'
import homeHeader from './components/homeHeader'
import homeContent from './components/homeContent'
import titleContent from './components/titleContent'
const routes = [
{path:'/titleHeader',component:titleHeader},
{path:'/homeHeader',component:homeHeader},
{path:'/homeContent/:aid',component:homeContent},
{path:'/titleContent',component:titleContent},
{path:'*',redirect:'/homeHeader'} //如果没有找到路由,则跳转的默认路由
]
const router = new VueRouter({
routes //等同于routes:routes格式
})
new Vue({
el: '#app',
router,
components: { App },
template: ' '
})
在app.vue中挂载路由出口,用来显示组件
结合router-link进行显示,或者跳转到各自的内容组件,
标题头部组件
首页头部组件
以homeHeader为例,代码如下:
-
{{key}}----{{item}}
在内容组件homeContent中可以获取homeHeader传递过来的数据,通过$route.params或者是get方法时的$route.query,这使得路由是动态的路由,可以根据在homeHeader中列表点击的索引进行动态传值,路由配置如下:
{path:'/homeHeader',component:homeHeader},
{path:'/homeContent/:aid',component:homeContent},
如果访问的路由不存在,可已设置一个人默认的路由跳转地址,放置页面出现空的情况:
{path:'*',redirect:'/homeHeader'}
以上就是vue-router基本用法,有什么疑问或者是我说的不对的地方欢迎评论一起探讨。