欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Vue路由的创建和使用方法

程序员文章站 2022-03-11 16:09:13
Vue路由的创建一 vue路由创建指令npm i vue-router # 安装路由插件二、vue路由标签router-link : 是用来生成a标签的组件,做页面跳转router-view : 是用来展示路由对应的内容的组件,所有的路由地址访问时对应的内容都在组件范围内显示三,使用,两种写入方式(当你用指令创建之后)import Vue from 'vue'import VueRouter from 'vue-router'import Home from './pages/Ho...

Vue路由的创建


一 vue路由创建指令

npm i vue-router # 安装路由插件

二、vue路由标签

  • router-link : 是用来生成a标签的组件,做页面跳转
  • router-view : 是用来展示路由对应的内容的组件,所有的路由地址访问时对应的内容都在组件范围内显示

三,使用,两种写入方式(当你用指令创建之后)

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './pages/Home'

Vue.use(VueRouter)

const router = new VueRouter({
    routes: [
  {
      path: '/', // 路径,就是url中访问的地址
      name: 'H', // 名字,就是我为这个路由设置一个名字
      component: Home // 组件,当浏览器中访问对应的地址时展示的内容
    },
    {
      path: '/list',
      name: 'L',
      // 异步方式引入的路由组件会在打包的时候生成单独的js文件
      //  在使用的时候才会被加载
      //  此方法主要用来做性能优化
      component: () => import('./pages/List') // 异步引入路由,当访问到此地址的时候才会引入文件
    },
] // 定义一个路由内容
})

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

四、创建子路由

  • children
 {
      path: '/user',
      component: () => import('./pages/User'),
      children: [
        {
          path: 'info',
          name: 'UI',
          component: () => import('./pages/User/Info')
        },
        {
          path: 'pwd',
          name: 'UPWD',
          component: () => import('./pages/User/ChangePwd')
        },
  }

五、每一个路由对应的页面中都会包含一些路由属性

  • $route
    表示当前的路由信息,有path,params,query等参数信息
  • $router
    是一个vue的路由对象,里面包含有一个路由的常见方法,比如push,replace,add等

六、params传参和query传参

是路由传参的两种常见形式。区别在于

  • query传参,参数在url中可见,是标准的url传参形式。使用?分割参数和url地址
  • params传参,参数在url默认是不可见的。除非设置了占位符
  • query传参不怕刷新,刷新之后参数还在
  • params传参除非设置了占位符,否则参数不能再刷新之后保存

编程式跳转

使用this.$router.push(路由对象)实现跳转

本文地址:https://blog.csdn.net/Black_snow_ji/article/details/107323324