首页 > 其他分享 >Vue Router系列之(二)Vue Router的使用步骤

Vue Router系列之(二)Vue Router的使用步骤

时间:2024-02-29 20:05:23浏览次数:27  
标签:Vue 步骤 js vue VueRouter router Router import

使用步骤

  1. 安装vue-router,命令:npm i vue-router

  2. 导入并应用插件

    // main.js
    import VueRouter from 'vue-router'
    Vue.use(VueRouter)
    
  3. 创建src/router/index.js,该文件专门用于创建整个应用的路由器

    //引入VueRouter
    import VueRouter from 'vue-router'
    //引入About、Home组件
    import About from '../components/About'
    import Home from '../components/Home'
    
    //创建router实例对象,去管理一组一组的路由规则
    const router = new VueRouter({
    	routes:[
    		{
    			path:'/about',
    			component:About
    		},
    		{
    			path:'/home',
    			component:Home
    		}
    	]
    })
    
    //暴露router
    export default router
    
  4. 创建Vue实例时指定router配置项,值为步骤三中创建的index.js

    //引入路由器
    //引入router,如果创建的文件名是index.js,引入的路径中可以不用具体到文件名,默认就会找index.js
    import router from './router'
    
    //创建vm
    new Vue({
    	el:'#app',
    	render: h => h(App),
    	// 引入VueRouter并应用插件后,可以使用router配置项
    	router:router
    })
    
  5. 借助router-link标签实现路由的切换(active-class可配置高亮样式)【这样就不需要我们手动切换访问的路径实现访问不同的组件】

    <!--router-link标签最终会变成a标签,如果是按钮实现的跳转,是不可以使用该标签实现的-->
    <!--active-class:当前元素被激活时会为当前元素添加类名-->
    <!--to:值为路由器中配置的每一个路由的path-->
    <router-link active-class="active" to="/about">About</router-link>
    
  6. 指定展示位置,当浏览器路径改变时,vue-router会根据路由找到对应的组件并显示在该位置

    <router-view></router-view>
    

多页面应用改造为单页面应用

  1. 找出导航区和展示区
  2. 将其中一个html的body部分中的内容放到App中

项目启动后,控制台出现如下报错

"export 'default' (imported as 'VueRouter') was not found in 'vue-router'

浏览器控制台出现如下报错,说明使用的vue-router版本过高,vue2对应vue-router 3版本

注:vue-router 3中没有VueRouter构造函数了

vue与vue-router的版本对应关系如下

vue 2 对应 vue-router 3

vue 3 对应 vue-router 4

卸载当前版本的vue-router,安装vue-router 3即可

npm uninstall vue-router
npm i vue-router@3

标签:Vue,步骤,js,vue,VueRouter,router,Router,import
From: https://www.cnblogs.com/wzzzj/p/18040056

相关文章

  • Vue Router系列之(八)router-link 标签的replace属性
    <router-link>的replace属性作用:控制路由跳转时操作浏览器历史记录的模式浏览器的历史记录有两种写入方式:分别为push和replace,push是追加历史记录,不破坏栈中的任何一条数据,不断的压入数据,replace是替换掉当前栈顶的那一条记录。路由跳转时候默认为push注:浏览器的历史记录实......
  • Vue Router系列之(七)路由的props配置项
    路由的props配置项​ 路由组件读取其他组件传递的参数时,是通过$route.params.id这种方式读取的,$route.params部分代码冗余度高,如何能够降低这种冗余?props配置项可以做到​ 作用:让路由组件更方便的收到参数{ name:'xiangqing', path:'detail/:id', component:Detail,/......
  • Vue Router系列之(六)命名路由
    命名路由命名路由:给你的路由规则起个名字作用:可以简化路由的跳转【路由层级比较多时】。如何使用给路由规则命名:{ path:'/demo', component:Demo, children:[ { path:'test', component:Test, children:[ {name:'hello'//通......
  • Vue Router系列之(五)路由传参
    路由传参如何给路由组件传递参数点击导航区的时候将数据带给路由组件,展示区根据数据渲染组件,渲染的都是同一个组件,只不过数据不同路由组件可以接收两种参数:query参数和params参数这两种参数的写法与Ajax中query参数和params参数的写法是一样的1.query参数传递参数<!--......
  • Vue Router系列之(十一)两个新的生命周期钩子
    两个新的生命周期钩子​ 缓存路由组件和定时器一起使用时,如果进行了路由跳转,本应触发在beforeDestroy钩子中清除定时器方法,但因为缓存了路由组件,就导致原来的路由组件的beforeDestroy钩子不会被触发,定时器也就不会清除作用:路由组件所独有的两个钩子,用于捕获路由组件的激活状态......
  • Vue Router系列之(十)缓存路由组件
    缓存路由组件完善路由的技巧作用:让不展示的路由组件保持挂载,不被销毁。​ 正常情况下,进行了路由跳转后,之前的组件会被销毁,如果之前的组件中存在input框之类的表单类组件,输入的内容也就消失了,也就是说,要保证路由跳转后不销毁之前的组件具体编码://缓存的对象:并不是所有路......
  • 答应我,在vue中不要滥用watch好吗?
    前言上周五晚上8点,开开心心的等着产品验收完毕后就可以顺利上线。结果产品突然找到我说要加需求,并且维护这一块业务的同事已经下班走了,所以只有我来做。虽然内心一万头草泥马在狂奔,但是嘴里还是一口答应没问题。由于这一块业务很复杂并且我也不熟悉,加上还饿着肚子,在梳理代码逻辑......
  • Vue Router系列之(九)编程式路由导航
    编程式路由导航作用:不借助<router-link>实现路由跳转,让路由跳转更加灵活。为什么需要除了<router-link>标签之外实现路由跳转的方式?<router-link>标签最后变为<a>标签,无法实现button按钮的跳转触发路由跳转可能需要异步触发,<router-link>标签也无法实现具体编码://$ro......
  • Vue Router系列之(十二)路由守卫
    路由守卫作用:对路由进行权限控制,满足一定条件才能看到跳转到的路由组件分类:全局守卫、独享守卫、组件内守卫全局守卫://src/router/index.js//router:我们创建的路由器实例//router.beforeEach(function):每一次进行路由跳转之前都会帮我们调用我们传入的函数//全......
  • Vue CLI 系列之(十)webStorage
    webStorage【浏览器本地存储】localStorage和sessionStorage统称为webStorage1.localStorage未登录账号的情况下进行了商品搜索,搜索历史中保存了之前的搜索记录借助浏览器的本地存储可以将数据存到硬盘上,用于缓存数据通过浏览器如何查看浏览器本地存储​ 每个网站都有自己......