【VUE】vue路由配置router

On the way656

已于 2022-12-08 16:54:25 修改

阅读量278

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

于 2022-12-08 16:40:27 首次发布

本文链接：https://blog.csdn.net/weixin_64630359/article/details/128239621

版权

Vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1. 安装路由(注意vue2安装的是3.x版本)

npm i vue-router@3.x

2. 配置路由

// router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
const Home=()=>import('@/components/home.vue')
const routes=[
  {
    path:'/home',
    component:Home
  }
]
const router=new VueRouter({
  routes
})
Vue.use(VueRouter)
export default router

3. 注册路由

// main.js
import Vue from 'vue'
import App from './App.vue'
+ import router from './router'

+ import VueRouter from 'vue-router'
Vue.config.productionTip = false
+ Vue.use(VueRouter)
new Vue({
  render: h => h(App),
+ router
}).$mount('#app')

4. 注册组件

<template>
  <div>
    首页
  </div>
</template>

<script>
export default {
  name: 'V2DemoSchool'
}
</script>

<style lang="scss" scoped>

</style>

5. APP.vue

<template>
  <div>
   <router-link to="/home">首页</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'V2DemoApp',

  data () {
    return {}
  },

  mounted () {},

  methods: {}
}
</script>

<style lang="scss" scoped></style>