首页 > 其他 > 详细

Vue_router

时间:2021-06-09 18:33:29      阅读:27      评论:0      收藏:0      [点我收藏+]

先介绍一个vue路由的官网
https://router.vuejs.org/

vue路由配置:
1,安装:

npm install vue-router --save/npm install vue-router --save

2,引入并且Vue.use(VueRouter) 在main.js中··

import VueRouter from ‘vue-router‘
Vue.use(VueRouter)

3,配置路由

1,创建组件,引入组件

2,定义路由:

const routes={
    {path:‘/foo‘,compoent:Foo},
    {path:‘/bar‘,compoent:Bar},
      {path:‘*‘,redirect:‘/home‘}/*默认跳转路由*/
}

3、实例化VueRouter

const router=new VueRouter({
    routes//相当于routes:routes
})

4、挂载

new Vue({
    el:‘#app‘,
    router,
    render:h=>h(App)
})

在需要路由组件的地方

<router-view><router-view>
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>

Vue_router

原文:https://www.cnblogs.com/ju-ruo/p/14867252.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!