Vue之初识路由

• 前端

路由有什么用？

在我们修改地址栏路径时，切换显示匹配的组件

VueRouter的使用(5 + 2)

5个基础步骤(固定)

1.下载:下载 VueRouter模块到当前工程，版本3.6.5

yarn add vue-router@3.6.5
npm i vue-router@3.6.5

2.引入

import VueRouter from 'vue-router'

3.安装注册

Vue.use(VueRouter)

4.创建路由对象

const router =new VueRouter()

5.注入，将路由对象注入到new Vue实例中，建立关联

new Vue({
   render:h => h(App).
   router
}).$mount('#app')

2 个核心步骤

1.创建需要的组件(views目录)，配置路由规则

import FirstNav from './views/FirstNav.vue'
import SecondNav from './views/SecondNav.vue'
import ThreeNav from './views/ThreeNav.vue'
const router = new VueRouter({
  routes: [{
    path: "/FirstNav", component: FirstNav,
  },
  {
    path: "/SecondNav", component: SecondNav,
  },
  {
    path: "/ThreeNav", component: ThreeNav
  }
  ]
})

2.配置导航，配置路由出口(路径匹配的组件显示的位置)

  
    1
    2
    3

感谢大家的阅读，如有不对的地方，可以向我提出，感谢大家！

本文来自网络，不代表协通编程立场，如若转载，请注明出处：https://net2asp.com/0e7a4f5f3d.html

赞 (0)
« 上一篇 1天前
下一篇 » 1天前

相关推荐