VueRouter 学习笔记

最新推荐文章于 2023-06-03 15:44:30 发布

罗小成

最新推荐文章于 2023-06-03 15:44:30 发布

阅读量132

点赞数

分类专栏：移动端混合开发程序人生文章标签： vue

本文链接：https://blog.csdn.net/u012524598/article/details/118002696

版权

本文是VueRouter的学习笔记，详细介绍了如何搭建环境、使用router-link、配置子路由、携带参数跳转、重定向、设置Mode以及处理404页面。重点讨论了vue-router中name属性的重要作用，包括界面标识和多模块加载。

摘要由CSDN通过智能技术生成

一、介绍

Vue 中的页面都是SPA(单页面应用), 页面之间的跳转实际上只是更改了页面的内容，页面的地址是没有变化的，而这一需求标签不能实现，于是推出 VueRouter, 他让我们实现页面的切换就变得易如反掌

单页面应用：所有的页面最终都打包集合成一个vue界面，这样的好处是不用切换url地址就能改变当前页面内容，坏处是第一次加载会慢一点

二、环境搭建&简单使用

1. 安装vue-router依赖包
npm install vue-router --save-dev

2. 导入vue-router包，配置路由对象，并将路由暴露出去
// ../router/index.js文件
import Vue from 'vue'
import Router from 'vue-router'  //引入vue-router包
import Hello from './components/Hello.vue' //引入Hello.vue页面
import Hi from './components/Hi.vue' //引入Hello.vue页面

Vue.use(Router) //将插件安装到Vue项目中

//创建Router对象，并将他暴露出去
const router = new Router({
  routes: [            
    {                
      path: '/',           //路由链接
      component: Hello,    //路由连接对应的页面
      name: 'Hello'        //路由名称
    },
    {  path: '/Hi',  component: Hi, name: 'Hi'}
  ]
})
export default router


3. 将router对象挂载到Vue全局实例中 
// main.js文件
import Vue from 'vue'
import App from './App.vue'
import router from './router/index'

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


4. 在App.vue中加入<router-view></router-view>
//App.vue文件
<template>
  <div>
    <routet-view style='flex:1'></router-view>
  </div>
</template>

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


5. 开启服务，在浏览器中输入就可以跳到对应界面
通过http://localhost:8080/#/    会访问到Hello界面
通过http://localhost:8080/#/Hi 会访问到Hi界面