前期准备

构建Vue项目,初始化项目文件和配置

一:基本使用

1:创建路由所需展示的组件

在项目根目录views文件夹下创建路由对应的视图组件:Home,About,My,Serch

2:在配置路由规则的文件内导入组件

在项目根目录src/router/index.js中导入组件

import Vue from 'vue'
import VueRouter from 'vue-router'
//导入我们创建的组件
import Home from "../views/Home.vue"
import About from "../views/About.vue"
import My from "../views/My.vue"
import Serch from "../views/Serch.vue"


Vue.use(VueRouter)

const routes = []

const router = new VueRouter({
  routes
})
export default router

3:配置路由和组件的映射关系

在项目根目录src/router/index.js中导入组件配置路由和组件的映射关系
routes数组中,一个对象就是一个路由和组件的映射关系
对象中的path属性对应一个字符串类型的路径
对象中的component属性对应一个组件
这一组组对象的映射关系,可以理解为路由对象监测到浏览器url地址中路径是/home,则展示对应的路由组件Home,以此类推

import Vue from 'vue'
import VueRouter from 'vue-router'
//导入我们创建的组件
import Home from "../views/Home.vue"
import About from "../views/About.vue"
import My from "../views/My.vue"
import Serch from "../views/Serch.vue"

Vue.use(VueRouter)

//在该数组内配置路由和组件的映射关系
const routes = [
  //一个对象就是一个映射关系
  {
    path: "/home",
    component: Home
  },
  //一个对象就是一个映射关系
  {
    path: "/about",
    component: About
  },
  //一个对象就是一个映射关系
  {
    path: "/my",
    component: My
  },
  //一个对象就是一个映射关系
  {
    path: "/serch",
    component: Serch
  },
]

const router = new VueRouter({
  routes
})
export default router

4:使用路由,通过<router-link>和<router-view>组件标签

<router-link> 是vue-router内置的一个全局组件
<router-link>组件标签默认情况下最终会被编译成<a>标签
<router-view相当于占位符的作用,放在哪,路由对应的组件就展示在哪
这两个标签都是对标签
<router-link>中的to属性可以用来设置跳转路径,类似于<a>标签的href属性 我们在App组件的模板使用上述的标签:

<template>
  <div id="app">
    <div>
      <router-link to="/home">首页</router-link>
      <router-link to="/about">关于</router-link>
      <router-link to="/serch">搜索</router-link>
      <router-link to="/my">我的</router-link>
    </div>
    <div>
      //占位符的作用,放在哪,路由对应渲染的组件就展示在哪
      <router-view></router-view>
    </div>
  </div>
</template>
 
<script>
export default {
  name: "App",
  data() {
    return {};
  },
};
</script>

5:浏览器渲染

二:<router-link>组件标签的属性补充

to 属性跳转对应的路径

<router-link to="/home">首页</router-link>

默认渲染成a标签,点击后,就跳转到定义的路径,之后被路由监测到,展示对应的组件

tag 属性修改自身渲染成什么标签

<router-link to="/home" tag="button">首页</router-link>

渲染成 button 标签

replace 属性该属性没有值

<router-link to="/home" tag="button" replace>首页</router-link>

默认跳转是由前进,后退的记录的 ,添加 replace 属性后前进后退变成灰色,点击不了

三:路由模式 hash history

现在我们运行本地服务器的url地址默认会凭拼接一个/#(哈希值),不太好看,我们可以用HTML History改变这个url的显示

hash模式模式(默认)

浏览器url展示: http://localhost:8080/#/home

history路由模式

浏览器url展示: http://localhost:8080/home (以后上线需要后端服务器端支持, 否则找的是文件夹)

如何从默认的hash值模式修改为history路由模式?

router文件夹下的index.js:

const router = new VueRouter({
  routes,
  mode:"history"  //新增一个模式,"history"
})

四:路由重定向 redirect

可以理解为当浏览器进入某个路径时，我们可以对这个路径进行强制跳转到别的路径

router文件夹下的index.js:进行配置
添加一组映射关系,一般写在数组第一位
当我们第一次打开浏览器时,浏览器监测到路径是根路径,就重新改变方向到/home,且/home路由仍然展示挂载的组件Home

//在该数组内配置路由和组件的映射关系
const routes = [
  {
    ////也可以写成""空字符串或/
    path: "/",
    redirect: "/home"
  },
  //一个对象就是一个映射关系
  {
    path: "/home",
    component: Home
  },
    ........
]

浏览器运行演示

五:编程式路由(通过代码跳转路由)

以下代码演示通过点击按钮事件实现跳转路由

当我们 new VueRouter时, VueRouter向所有组件都注入了一个属性 $router,同时$ router也是我们new VueRouter的全局对象,它们两者全等
$router对象有两个方法可以实现路径跳转 push replace
push方法跳转路径,会产生浏览器的前进后退的记录
replace方法跳转路径,不会产生记录,浏览器前进后退按钮是灰色的
两种方法在传递参数上语法相同,同时都有两种方式:

1.直接传递一个字符串类型的路径

2.传递一个配置对象,通过path属性,对应一个字符串类型的路径

<template>
  <div id="app">
    <div>
      <button @click="btn1">跳转首页</button>
      <button @click="btn2">跳转关于</button>
      <button @click="btn3">跳转搜索</button>
      <button @click="btn4">跳转我的</button>
    </div>
    <div>
      <router-view></router-view>
    </div>
  </div>
</template>
 
<script>
export default {
  name: "App",
  data() {
    return {};
  },
  methods: {
    btn1() {
      this.$router.push("/home");
    },
    btn2() {
      this.$router.push({
        path: "/about",
      });
    },
    btn3() {
      this.$router.push("/serch");
    },
    btn4() {
      this.$router.push({
        path: "/my",
      });
    },
  },
};
</script>

六:路由嵌套

创建二级路由组件
router/index.js中引入
配置嵌套路由的映射关系
在一级路由的配置对象中,新增children属性,对应一个数组
数组里,每一个对象仍然对应者一个嵌套路由的映射关系
对象中的path属性对应一个字符串类型的路径,子路由path路径不用添加斜杠/,浏览器会自动添加/
对象中的component属性对应一个组件
这一组组对象的映射关系,可以理解为路由对象监测到浏览器的url地址的路径,如果是/My,则展示对应的My组件,如果是/My/child1,则在My组件内继续展示My_child1组件,以此类推

import Vue from 'vue'
import VueRouter from 'vue-router'
//导入我们创建的组件
import Home from "../views/Home.vue"
import About from "../views/About.vue"
import My from "../views/My.vue"
import Serch from "../views/Serch.vue"
//导入二级路由组件
import My_child1 from "../views/My_child1.vue"
import My_child2 from "../views/My_child2.vue"


Vue.use(VueRouter)

//在该数组内配置路由和组件的映射关系
const routes = [
    .....
  //一个对象就是一个映射关系
  {
    path: "/my",
    component: My,
    children: [
      {
        path: "child1",
        component: My_child1
      },
      {
        path: "child2",
        component: My_child2
      },
    ]
  },
  //一个对象就是一个映射关系
  {
    path: "/serch",
    component: Serch
  },
]

My组件模板中:

<template>
  <div id="">
    <h1>我是My组件</h1>
    <div>
      <router-link to="/my/child1">周杰伦</router-link>

      <router-link to="/my/child2">林俊杰</router-link>
    </div>

    <div>
      <router-view></router-view>
    </div>
  </div>
</template>

浏览器展示

路由嵌套.png

七:路由跳转向对应组件传递参数(数据)

1:声明式路由传递 query类型

传递后的浏览器url样式: ....../serch?uname=张三

1-1.传递普通字符串参数

直接在<router-link>的to属性中路径上拼接参数(数据)—— ?参数名=参数值,&间隔多个参数
对应路由组件用$route.query.参数名获取参数 App模板中:

<template>
  <div id="app">
    <div>
      <router-link to="/home">首页</router-link>
      <router-link to="/about">关于</router-link>
      <router-link to="/serch?uname=张三">搜索</router-link>
      <router-link to="/my">我的</router-link>
    </div>
    <div>
      <router-view></router-view>
    </div>
  </div>
</template>

Serch组件模板中:

<template>
  <div id="">
    <h1>我是搜索组件</h1>
    <h2>我是传递过来的参数:{{ $route.query.uname }}</h2>
  </div>
</template>

浏览器展示

query字符串.png

1-2.传递动态参数

利用v-bind绑定<router-link>的to属性
to属性的引号内对应一个对象
对象内to属性仍然对应一个字符串类型的路径
对象内query属性对应一个对象,其中属性值作为参数名,属性值作为参数值,参数值是从组件实例中的data或计算属性定义的变量
对应路由组件用$route.query.参数名获取参数 App组件中:

<template>
  <div id="app">
    <div>
      <router-link to="/home">首页</router-link>
      <router-link to="/about">关于</router-link>
      <router-link :to="{ path: '/serch', query: { uname: uname, age: age } }">搜索</router-link>
      <router-link to="/my">我的</router-link>
    </div>
    <div>
      <router-view></router-view>
    </div>
  </div>
</template>
 
<script>
export default {
  name: "App",
  data() {
    return {
      uname: "李四",
      age: 18,
    };
  },
};
</script>

Serch组件模板中:

<template>
  <div id="">
    <h1>我是搜索组件</h1>
    <h2>我是传递过来的参数:{{ $route.query.uname }}</h2>
    <h2>我是传递过来的参数:{{ $route.query.age }}</h2>
  </div>
</template>

浏览器展示

query动态参数.png

2:声明式路由传递 params类型

传递后的浏览器url样式: ....../serch/张三

2-1.传递普通字符串参数

首先在路由配置文件中对应的路由重新配置规则

  {
    path: "/serch",
    component: Serch
  },
  //改为:
    {
    //uname就是之后组件获取参数的参数名,要记住
    path: "/serch/:uname",
    component: Serch
  },

然后在<router-link>的to属性中路径上拼接参数(数据)——/参数值
对应路由组件用$route.params.参数名获取参数 App组件模板中:

<template>
  <div id="app">
    <div>
      <router-link to="/home">首页</router-link>
      <router-link to="/about">关于</router-link>
      <router-link to="/serch/王五">搜索</router-link>
      <router-link to="/my">我的</router-link>
    </div>
    <div>
      <router-view></router-view>
    </div>
  </div>
</template>

Serch组件模板中:

<template>
  <div id="">
    <h1>我是搜索组件</h1>
    <h2>我是传递过来的参数:{{ $route.params.uname }}</h2>
  </div>
</template>

浏览器展示

params普通字符串.png

2-2.传递动态参数

首先在路由配置文件中对应的路由重新配置规则

  {
    path: "/serch",
    component: Serch
  },
  //改为:
    {
    //uname就是之后组件获取参数的参数名,要记住
    path: "/serch/:uname",
    component: Serch
  },

利用v-bind绑定<router-link>的to属性
to属性的引号内用字符串路径再拼接一个动态参数值(数据)
参数值是从组件实例中的data或计算属性定义的变量
对应路由组件用$route.params.参数名获取参数 App组件中:

<template>
  <div id="app">
    <div>
      <router-link to="/home">首页</router-link>
      <router-link to="/about">关于</router-link>
      <router-link :to="'/serch/' + uname">搜索</router-link>
      <router-link to="/my">我的</router-link>
    </div>
    <div>
      <router-view></router-view>
    </div>
  </div>
</template>
 
<script>
export default {
  name: "App",
  data() {
    return {
      uname: "洪七",
    };
  },
};
</script>

Serch组件模板中

<template>
  <div id="">
    <h1>我是搜索组件</h1>
    <h2>我是传递过来的参数:{{ $route.params.uname }}</h2>
  </div>
</template>

浏览器展示

params动态参数值.png

3:编程式路由传递参数 query类型

跳转后浏览器URL样式 ....../serch?uname=张三

例如通过click点击事件跳转路由进行参数传递
用 this.$router拿到全局路由对象
this.$router的push方法或replace方法可以进行路径跳转
push方法产生浏览器前进后退记录
replace方法不产生浏览器前进后退记录
跳转方法里传递一个配置对象
配置对象里,path属性对应一个字符串类型的路径
query属性对应一个对象,对象属性名作为传递的参数名,属性值作为传递的参数值
对应路由组件用$route.query.参数名获取参数值 App模板中

<template>
  <div id="app">
    <div>
      <button @click="btn1">首页</button>
      <button @click="btn2">关于</button>
      <button @click="btn3">搜索</button>
      <button @click="btn4">我的</button>
    </div>
    <div>
      <router-view></router-view>
    </div>
  </div>
</template>
 
<script>
export default {
  name: "App",
  data() {
    return {
      uname: "八爷",
      age: 18,
    };
  },
  methods: {
    btn1() {
      this.$router.push("/home");
    },
    btn2() {
      this.$router.push("/about");
    },
    btn3() {
      this.$router.push({
        path: "/serch",
        query: {
          uname: this.uname,
          age: this.age,
        },
      });
    },
    btn4() {
      this.$router.push("/my");
    },
  },
};
</script>

Serch组件模板中

<template>
  <div id="">
    <h1>我是搜索组件</h1>
    <h2>我是传递过来的参数:{{ $route.query.uname }}</h2>
    <h2>我是传递过来的参数:{{ $route.query.age }}</h2>
  </div>
</template>

浏览器展示

编程式路由传递参数query.png

4:编程式路由传递参数 params类型

传递后的浏览器url样式: ....../serch/九哥

首先在路由配置文件中对应的路由重新配置规则

  {
    path: "/serch",
    component: Serch
  },
  //改为:
    {
    //uname就是之后组件获取参数的参数名,要记住
    path: "/serch/:uname",
    component: Serch
  },

例如通过click点击事件跳转路由进行参数传递
用 this.$router拿到全局路由对象
this.$router的push方法或replace方法可以进行路径跳转
push方法产生浏览器前进后退记录
replace方法不产生浏览器前进后退记录
跳转方法里传递字符串类型的路径,再拼接需要传递的参数
对应路由组件用$route.params.参数名获取参数值 App组件中

<template>
  <div id="app">
    <div>
      <button @click="btn1">首页</button>
      <button @click="btn2">关于</button>
      <button @click="btn3">搜索</button>
      <button @click="btn4">我的</button>
    </div>
    <div>
      <router-view></router-view>
    </div>
  </div>
</template>
 
<script>
export default {
  name: "App",
  data() {
    return {
      uname: "九哥",
    };
  },
  methods: {
    btn1() {
      this.$router.push("/home");
    },
    btn2() {
      this.$router.push("/about");
    },
    btn3() {
      this.$router.push("/serch/" + this.uname);
    },
    btn4() {
      this.$router.push("/my");
    },
  },
};
</script>

Serch组件模板中

<template>
  <div id="">
    <h1>我是搜索组件</h1>
    <h2>我是传递过来的参数:{{ $route.params.uname }}</h2>
  </div>
</template>

浏览器展示

编程式路由传递参数params类型.png

4.1 编程式路由传递params类型参数语法补充

例如通过click点击事件跳转路由进行参数传递
用 this.$router拿到全局路由对象
this.$router的push方法或replace方法可以进行路径跳转
跳转方法内传递一个配置对象
配置对象中 name属性对应跳转的路由名字,可以在router/index.js中配置:

  {
    name: "Serch",
    path: "/serch/:uname",
    component: Serch
  },

params属性对应一个对象,属性名作为参数名(要和路由配置规则内冒号后的参数名相同),属性值作为参数值
对应路由组件用$route.params.参数名获取参数值 App组件中

<template>
  <div id="app">
    <div>
      <button @click="btn1">首页</button>
      <button @click="btn2">关于</button>
      <button @click="btn3">搜索</button>
      <button @click="btn4">我的</button>
    </div>
    <div>
      <router-view></router-view>
    </div>
  </div>
</template>
 
<script>
export default {
  name: "App",
  data() {
    return {
      uname: "十全十美",
    };
  },
  methods: {
    btn1() {
      this.$router.push("/home");
    },
    btn2() {
      this.$router.push("/about");
    },
    btn3() {
      this.$router.push({
        name: "Serch",
        params: {
          uname: this.uname,
        },
      });
    },
    btn4() {
      this.$router.push("/my");
    },
  },
};
</script>

Serch组件模板中

<template>
  <div id="">
    <h1>我是搜索组件</h1>
    <h2>我是传递过来的参数:{{ $route.params.uname }}</h2>
  </div>
</template>

浏览器展示

params语法二.png

Vue_Router 路由的基本使用

前期准备

一:基本使用

1:创建路由所需展示的组件

2:在配置路由规则的文件内导入组件

3:配置路由和组件的映射关系

4:使用路由,通过<router-link>和<router-view>组件标签

5:浏览器渲染

二:<router-link>组件标签的属性补充

to 属性 跳转对应的路径

tag 属性 修改自身渲染成什么标签

replace 属性 该属性没有值

三:路由模式 hash history

hash模式模式(默认)

history路由模式

如何从默认的hash值模式修改为history路由模式?

四:路由重定向 redirect

浏览器运行演示

五:编程式路由(通过代码跳转路由)

六:路由嵌套

七:路由跳转向对应组件传递参数(数据)

1:声明式路由传递 query类型

1-1.传递普通字符串参数

1-2.传递动态参数

2:声明式路由传递 params类型

2-1.传递普通字符串参数

2-2.传递动态参数

3:编程式路由传递参数 query类型

4:编程式路由传递参数 params类型

4.1 编程式路由传递params类型参数语法补充

to 属性跳转对应的路径

tag 属性修改自身渲染成什么标签

replace 属性该属性没有值