Vue基础整理之路由二次封装
Vue路由的坑我可是踩了不少,那么我们就来看看小萌新的路由二次封装吧封装路由首先我们要引入vue的路由npm install vue-router save之后我们创建router.js 编写代码在router.js中编写import Vue from 'vue'import routes from './routes'import Router from 'vue-router'Vue.use(
·
Vue路由的坑我可是踩了不少,那么我们就来看看小萌新的路由二次封装吧
封装路由首先我们要引入vue的路由
npm install vue-router --save
之后我们创建router.js 编写代码在router.js中编写
import Vue from 'vue'
import routes from './routes'
import Router from 'vue-router'
Vue.use(Router)
const router = new Router({
mode: 'history',
routes: routes
})
//路由前置守卫相关操作
router.beforeEach((to, from, next) => {
next()
})
export default router
然后再同级建立routes.js
并在routes.js中编写具体路由定位
export default [
{
path: '/',
redirect: '/HelloWorld',
},
{
path: '/name',
name: 'name',
component: () => import('./components/logt.vue')
},
{
path: '/HelloWorld',
name: 'HelloWorld',
component: () => import('./components/HelloWorld.vue')
}
]
最后在main.js中引入router.js并挂在Vue上
import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App),
}).$mount('#app')
首先我们需要在App.vue的某个位置使用标签来展示路由
路由是呈现在标签中的
在vue组件中调用用
this.$router.push({
path: "/name"
})
即可完成跳转
还有就是大家会发现npm run build打包后index.html路由跳转不了了,其实很简单
把router.js里的mode: 'history’注释掉就好了
更多推荐
已为社区贡献17条内容
所有评论(0)