Vue-router个人笔记

Vue-router是Vue的官方路由。

安装：

yarn install vue-router //下载

在src目录下会出现一个router文件

第一步：在index中引入

import Router from 'vue-router'
//因为vue-router是一个插件 所以需要Vue.use(Rouer)
Vue.use(Rouer)

第二步：创建路由实例，配置路由信息

const routes = []
const route = new VueRouter({
routes
})

第三步：将vue-router实例对下那个导出

export default router

第四步：在Vue实例中挂载创建的路由实例,然后在Vue实例中引入

import router from './router'

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

vue中单页面路由跳转其实就是组件切换

我们创建两个组件然后配置路由

先在router/index.js中引入两个组件

import Home from '..//components/Home';
import About from '..//components/About';

然后指定路由路径和组件

const routes =[
    {
        path:"/home",
        component:Home
    },{
        path:"/about",
        component:About
      }
]

接下来使用路由就可以实现页面跳转了

<template>
  <div id="app">
    <!-- 定义两个路由链接 -->
    <router-link to="/home">首页</router-link>
    <router-link to="/about">关于</router-link>

    <!-- 展示组件内容 -->
    </router-view>
</template>

修改静态路由的模式为history
我们之前都是采用hash的方式来静态路由跳转的， 但hash方式有一个缺点， 即带有#
例如：我们跳转都Home页， 他的路径是

http://localhost:8080/#/home

带有一个#， 这不符合我们通常路径的使用方法，所以，我们可以考虑将其替换为history的模式。 如何替换呢？ 在router/index.js文件中

const router = new Router({
  // 这里配置的是路由和组件的映射关系, 是一个数组.
  routes,
  mode: "history"
})

 这样就把路由模式改成history了

如果是普通的按钮点击事件实现页面跳转

<template>
  <div id="app">
    <!-- 定义两个路由链接 -->
    <button @click="clickHome">首页</button>
    <button @click="clickAbout">关于</button>
    <!-- 展示组件内容 -->
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: 'App',
  methods:{
    clickHome() {
      this.$router.push("/home")
      console.log("点击home按钮")
    },
    clickAbout() {
      this.$router.push("/about")
      console.log("点击about按钮")
    }
  }
}
</script>

动态路由：动态路由就是url不是固定的，比如查看某个用户的个人界面

import User from "../components/User"

const routes = [
  {
    path: "/user/:userId",
    component: User
  }
]

这里path使用了:userId占位，表示这里有一个占位符，将被真实的userId所替代，后面在路由传递的时候变量需要和这里保持一致

<template>
    <div>
      <h2>用户界面</h2>
      <div>欢迎{{userId}},来到用户界面</div>
    </div>
</template>

<script>
    export default {
        name: "User",
        data(){
          return {
            userId:this.$route.params.userId
          }
        }
    }
</script>

这样可以获取到路由上传来的userId，我们可以通过this.$route.params来获取参数。

嵌套路由(子路由)：

/admin 主页面

/admin/create 创建新信息

/admin/edit 编辑信息

创建子路由的方法就是在原有路由的配置中加children:[]

const routes = [
    {
    path:'/admin',
    component:Admin,
    children:[
    {
        path:'/create',
        component:Create
    },
    {
        path:'/edit',
        component:Edit
    }
        ]    
}
]

路由跳转的几种方式

方式一：path路径跳转

缺点：不能传引用数据类型-数组，对象等。

//写法1
<router-link to="/admin">跳转</router-link>
//router-link解析出来的其实是a标签
//写法2
<router-link :to="path1">跳转</router-link>
...
data(){
  return{
     path1:"/admin"
  }
}

方式二：命名式路由跳转

优点：可以传引用数据类型

<router-link :to="{name:'admin',query:{city:cityObj}}"购物车</router-link>

...

//路由配置
{
    path:'/admin',
    //该path路径不能少，因为命名式路由跳转是通过name找到路径的
    name:'admin',
    component:Admin
}

方式三：编程式路由

优点：可以传引用数据类型

jumpHome() {
        this.$router.push({
            path:"/home"，
            query:{
            	id:this.id
            }
        })
      }
 ...
 
 //接收值如果进入另一个页面，一般在created中接收
 this.$route.query.id
 
 //路由配置
 { path: "/home", component: ()=>import("../Home") }
 
  //或者name和params搭配,接收值 this.$route.params.id

路由传值：

query查询参数传值
1.1 router-link的to属性或者js方式push方法里的参数由字符串更换成对象, 需要切换的路由由path字段负责, 传递的值由query字段负责
1.2 query方式传递的值会以键值对的形式拼接到网址的后面, 与get请求传递数据的格式类似
1.3 query方式传递的值, 刷新页面, 值不会消失
1.4 query方式传值, 不需要去配置routes数组里的对应对象

params路径参数传值
2.1 router-link的to属性或者js方式push方法里的参数由字符串更换成对象, 需要切换的路由由name字段负责, 传递的值由params字段负责
2.2 params方式传递的值会以路径的形式拼接到网址的后面
2.3 params方式传递的值, 刷新页面, 值会丢失
2.4 params方式传值, 需要去配置routes数组里的对应对象, 需要给对象多加一个name字段, 还需要将path字段修改成 “/路由/:值1/:值2/:…”
 

<router-link :to="{name:'home', params: {id:1}}"></router-link>
<router-lin :to = "'user/'+userId"></router-link> //通过this.$route.params.userId获取这个id
this.$router.push({name:'home',query: {id:'1'}})
this.$router.push({path:'/home',query: {id:'1'}})
this.$router.push({name:'home',params: {id:'1'}}) // 只能用 name

路由规则配置属性有哪些，分别有什么作用

​