如何在vue中设置路由

注意:文章只是演示如何使用路由,在真实项目习惯建立router文件夹,统一管理路由

1.npm安装路由

npm  i vue-router

2.在main.js中引入并使用

import VueRouter from 'vue-router'
Vue.use(VueRouter)
  1. 将需要跳转的页面引入
import  detail from './page/Detail.vue'
import  home from './page/home.vue'

4.配置路由

new Vue({
  router: new VueRouter({
    routes:[{
      path:'/',
      component:home
    },
      {
      path:'/detail',
      component:detail,
    }]
  }),
  render: h => h(App),
}).$mount('#app')
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容