vue 实现路由跳转
2018-10-31 11:50
726 查看
1.前一节已经安装了vue-router(npm install vue-router --save),现在就来使用一下
1)先在App.vue组件中配置路由出口
[code]<template> <div id="app"> <div class="container"> <app-header></app-header> </div> <div class="container"> <!-- 路由匹配到的组件将渲染在这里 --> <router-view></router-view> </div> </div> </template>
2) 配置main.js文件
[code]import Vue from 'vue' import App from './App.vue' import VueRouter from 'vue-router' import { routes } from './router' Vue.use(VueRouter); const router = new VueRouter({ routes, }) new Vue({ el: '#app', router, render: h => h(App) })
3)配置 router.js文件
[code]import Home from './components/Home' import Coupon from './components/Marketing/Coupon' import Questionnaire from './components/Marketing/Questionnaire' import Analysis from './components/Marketing/Analysis' export const routes = [ { path: '/', component: Home}, { path: '/coupon', component: Coupon}, { path: '/questionnaire', component: Questionnaire}, { path: '/analysis', component: Analysis}, { path: '*', redirect: '/' } ]
这里最后一条配置是当访问的 url 没有路由与之匹配的话就跳转到主页
4) 修改Header.vue 组件
[code]<template> <header> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <router-link class="py-2" to="/"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="d-block mx-auto"><circle cx="12" cy="12" r="10"></circle><line x1="14.31" y1="8" x2="20.05" y2="17.94"></line><line x1="9.69" y1="8" x2="21.17" y2="8"></line><line x1="7.38" y1="12" x2="13.12" y2="2.06"></line><line x1="9.69" y1="16" x2="3.95" y2="6.06"></line><line x1="14.31" y1="16" x2="2.83" y2="16"></line><line x1="16.62" y1="12" x2="10.88" y2="21.94"></line></svg> </router-link> <router-link to="/" class="navbar-brand">主页</router-link> <ul class="navbar-nav"> <li><router-link to="/coupon" class="nav-link">优惠券管理</router-link></li> <li><router-link to="/questionnaire" class="nav-link">问卷管理</router-link></li> <li><router-link to="/analysis" class="nav-link">数据统计</router-link></li> </ul> </nav> </header> </template>
然后 npm run dev 运行就OK了!
具体配置解释和更多信息可以访问 vue-router 官方文档查看
阅读更多相关文章推荐
- 使用vue-router beforEach实现判断用户登录跳转路由筛选功能
- [问题探讨]VUE导航守卫beforeRouteLeave实现路由跳转拦截
- 用 vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)
- vue 如何实现在函数中触发路由跳转
- vue路由跳转时判断用户是否登录功能的实现
- Vue实现路由跳转和嵌套
- Vue实现前台页面组件化路由跳转
- vue 实现在函数中触发路由跳转的示例
- vue通过 vue.mixin(混合)实现 任意页面记录滚动条位置(路由router.query参数一致) 并跳转到上次的位置
- vue 如何实现在函数中触发路由跳转
- 使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
- Vue+axios 实现http拦截及路由拦截
- ARouter路由使用拦截链接跳转实现
- vue2+el-menu实现路由跳转及当前项的设置方法实例
- Vue-router路由判断页面未登录跳转到登录页面的实例
- vue2.0 实现导航守卫(路由守卫)
- JS实现路由跳转
- vue.js vue-router如何实现无效路由(404)的友好提示
- 使用Vue-Router 2实现路由功能
- Vue2路由动画效果实现