Vue 安装 Vue-router 路由安装以及使用

vue-router 是 Vue 的一个插件库,适用于构建单页面应用。

单页面应用:整个应用中只有一个完整的页面,切换页面就是替换页面中的内容。

工作原理:当浏览器的路径发生改变时,路由器会自动显示路径所对应的组件。

嵌套路由:通过路由实现组件的嵌套展示,就叫做嵌套路由。

 一. Vue-router 安装及配置:

:由于 vue-router 4 及以上的版本只能在 vue3 中使用,所以我们需要安装 vue-router 3 的版本。

Vue 安装 Vue-router 路由安装以及使用_第1张图片

 安装指定版本:

npm install vue-router@版本号

安装最新版本:

 npm install vue-router

二、创建路由组件:

在 src 目录下创建 views 文件夹,并创建 Home.vue 和 About.vue 组件。





备注:router-link 标签类似于 a 标签,而 to 属性和 a 标签的 href 属性作用相似。

三、配置 Vue-router:

在 src 目录下创建 router 文件夹,并在文件夹内创建 index.js 文件,添加以下内容。

// 引入Vue核心库
import Vue from 'vue'
// 引入vue-router
import VueRouter from 'vue-router'
// 应用vue-router插件
Vue.use(VueRouter)

// 引入组件(方式一)
import Home from '../views/Home.vue'

// 配置路由
const routes = [
  {
	// 路径,/ 表示首页
    path: '/',
    // 使用组件(方式一)
    component: Home
  },
  {
	// 路径
    path: '/about',
    // 引入并使用组件(方式二)
    component: () => import('../views/About.vue')
  }
]

// 创建路由器
const router = new VueRouter({
  routes
})

// 导出路由器
export default router

引入组件的区别:

方式一:直接导入,就是在应用第一次执行时,就会加载这个文件。

import Home from '../views/Home.vue'
component: Home

方式二:路由懒加载,就是跳转到这个页面的时候,再去加载这个文件。

component: () => import('../views/About.vue')

四、引入 Vue-router:

在 main.js 文件中引入 router,并挂载到 vue 实例上

import Vue from 'vue'
import App from './App.vue'

// 1.引入vue-router
import router from './router'

Vue.config.productionTip = false

new Vue({
  // 2.挂载到vue实例上
  router,
  render: h => h(App)
}).$mount('#app')

五、设置路由出口:

在 App.vue 组件中设置 router-view 标签,指定组件呈现位置。

六、最终效果:

这样就配置好了,当点击链接时会修改浏览器的路径,从而显示对应的组件。

Vue 安装 Vue-router 路由安装以及使用_第2张图片

 

注意

  路由组件通常放在 views 文件夹内,而一般组件放在 components 文件夹内。

  跳转页面时,会先将当前组件销毁,再去加载新组件。

  每个组件都有自己的 $route 属性,里面存放着自己的路由信息。

  整个应用只有一个 $router 路由器,可以通过组件的 $router 属性获取。

原创作者:吴小糖

创作时间:2023.7.18

你可能感兴趣的:(vue.js,前端,javascript)