Vue路由的创建和使用方法

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