Vue实现路由(Vue-router，参数传递，编程式路由导航)

目录

路由是什么？

怎么实现路由

第一步 创建一个文件夹 router ，里面创建一个index.js 内容是

第二步 在main.js中引入和应用 router

第三步 在Vue中 通过两个标签进行配置

跳转路由时的参数传递

query

params

query参数和 param参数的区别

编程式的路由导航

---

路由是什么？

就是点击某个"标签"时 转到显示出不同的组件。

比如点击 home 按钮就在特定的位置显示出 home.vue里的内容。

怎么实现路由

第一步 创建一个文件夹 router ，里面创建一个index.js 内容是

// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
//引入组件
import A from '../components/A'
import B from '../components/B'

//创建并暴露一个路由器
export default new VueRouter({
	routes:[
		{
			path:'/urlA',
			component:A
		},
		{
			path:'/urlB',
			component:B
		}
	]
})

第二步 在main.js中引入和应用 router

//引入路由器

import router from './router'

//应用插件

Vue.use(VueRouter)

第三步 在Vue中 通过两个标签进行配置

  <!-- Vue中借助router-link标签实现路由的切换 -->

          <router-link   to="/urlA">A组件</router-link>

 <router-view></router-view>

当点击上面的 router-link 标签时，router-view标签 所在的位置就会被替换为 A.vue

跳转路由时的参数传递

通过 router-link 中得到to属性传参

有两种写法 ，一种是用过 params 一种是 query

query

query的 写法有两种 ，一种是字符串直接传递 一种是对象写法

<li v-for="m in messageList" :key="m.id">
        <!-- 跳转路由并携带query参数，to的字符串写法  模板字符串 加 `` 里面用$ 来提取变量 -->
        <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{
   
   {
          m.title
        }}</router-link
        >&nbsp;&nbsp;

        <!-- 跳转路由并携带query参数，to的对象写法 -->
        <router-link
          :to="{
            path: '/home/message/detail',
            query: {
              id: m.id,
              title: m.title,
            },
          }"
        >
          {
   
   { m.title }}
        </router-link>
      </li>

params

也是两种写法

需要注意的是 params 的对象写法中 不能使用path ，只能使用命名路由name属性。

<li v-for="m in messageList" :key="m.id">
				<!-- 跳转路由并携带params参数，to的字符串写法 -->
				<router-link :to="`/home/message/detail/${m.id}/${m.title}`">{
   
   {m.title}}</router-link>&nbsp;&nbsp;

				<!-- 跳转路由并携带params参数，to的对象写法 -->
				<router-link :to="{
					name:'xiangqing',
					params:{
						id:m.id,
						title:m.title
					}
				}">
					{
   
   {m.title}}
				</router-link>
			
			</li>

在跳转后的vue中可以通过下面的表达式取出传递的参数

$route.query.XXX

$route.params.XXX

为了简化写法，可以使用路由中的 props 属性。

query参数和 param参数的区别

1.query传递显式参数，params传递不显式参数，params相对于query来说较安全一点

2.params传参 只能用 name,不能用 path。

编程式的路由导航

普通的路由导航需要借助 router-link 标签，也可以用函数来描述路由跳转的逻辑。类似于事件

通过 $router的push 和 replace 实现Vue的跳转。 

push在切换vue的时候不会覆盖掉之前的切换记录，之后可以回退到之前的Vue。

replace 在切换的时候会覆盖，也就是无法回退到之前的Vue。