Vue路由（单页面应用）

一、安装

输入命令：

winpty vue.cmd create 项目名

在这里插入图片描述
选择第二个

按空格选上Router

然后一路回车，等待安装

安装完后src中多了router.js（也可能是带有一个index.js的router文件夹）以及views文件夹
启动项目后可以发现多了一个 “|About” 可进行单页面切换
在这里插入图片描述
二、路由完整流程
一、template的设置部分

<template>
  <div>
      <router-view></router-view>
      <router-link to='/'>
        首页
      </router-link> 
      <router-link to='/fav'>
        收藏
      </router-link> 
      <router-link to='/config'>
        设置
      </router-link> 
  </div>
</template>

二、创建跳转到的组件的操作

创建好对应的若干个.vue组件(放在views文件夹或者components文件夹)

在这里插入图片描述

三、router.js

{
	path:"路径"
	component:组件
}

三、router-link相关配置

<router-link></router-link>

一》to:
	1》to='/home'
	2》:to='"/home"'
	3》:to='{path:"/home"}'
	4》:to='{
				path:"/home",
				query:{userId:123}
			}'
	5》:to="{ 
				name: 'user', 
				params: { userId: 123 }
			}"

	***补充，如何通过js方式而不是用router-link标签进行跳转
	具体用法参考官方文档
	# router.push
	# router.replace
	# router.go
	# router.back
	# router.forward

二》tag：默认为a标记，可以修改

	tag='li'
	tag='button'

三、router-link-active：默认触发的class类

官网：https://router.vuejs.org/api/#to

四、router-view相关配置（ keep-alive详解）

keep-alive:
		1》是什么？
			vue内置的组件，能在组件切换过程中将状态保存在内存中，防止dom
			重复渲染
		2》使用场景
			把页面保存在内存中，记住输入的内容等操作

		3》使用
			
			<keep-alive>
				<router-view></router-view>
			</keep-alive>
		
		需求：有的页面需要保存，有的不需要
				<keep-alive  include : "AAA,BBB" >	
						<router-view></router-view>
				</keep-alive>
			 也有正则的写法,在router.js配置等等方法
			 exclude则是不包含...
			 name由组件中的script抛出
				 <script>
					export default{
											name:"AAA"
									}
				</script>

五、router.js详解
一、说明

{
  path: '/',      //路径
  name: 'home',   //名称:基本上做标识或者判断
  component: Home //对应访问的组件
}

二、懒加载

{
  path: '/about',
  name: 'about',
  component: () => import('./views/About.vue')
}

三、路由重定向

{ 
  path: '*',   //找不到的网页
  redirect: Home
}

四、路由嵌套

{
  path: '/about',
  name: 'about',
  component: () => import('./views/About.vue'),
  children:[
      {
        path:"/xxx:id",
        component:Home
      },
      {
        path:"/xxx",
        component:Home
      }
  ]
}

六、路由的传值

1this.$router（全局的路由对象）

2》this.$route（局部的路由对象）
	1》
		{
	      path: '/about/:id',
	      name: 'about',
	      component: () => import('./views/About.vue')
	    }
	2》
		<router-link :to="{path:'/about',query:{
        aaa:123
     	}}">About</router-link>

Vue路由（单页面应用）

猜你喜欢