路由(vue-router)

路由

完成一个SPA单页面应用，达到类似于原生app的效果，切换没有白屏现象，提高用户体验

本质

根据url的不同来渲染不同的组件页面

路由创建

一级路由创建

1.在views文件夹中创建对应的路由页面组件

2.配置路由 在router下index.js中进行配置

（2-1）先把你要使用的组件页面引用

（2-2）配置路由规则

import引入

<!-- 2-1 -->
  // 1.引入要跳转的路由页面
  import Fenlei from '../views/fenlei.vue'
<!-- 2-2 -->
	const routes = [
  {
  path: '/fenlei',//url路径
  name: 'fenlei',//给这个路由规则起个名字
  component: Fenlei //引用组件
  },
]

 异步组件写法--按需加载

{
    path: '/redirect',
    component: Layout,
    hidden: true,
    component: () => import('@/views/redirect')
 },

3.在app.vue中设置router-view路由出口 -- <router-view/>  必须配置

二级路由/多级路由创建

使用children关键字来配置

1.路由页面创建 views文件夹

2.配置二级路由规则

（2-1）在router文件夹下的index.js中先引用二级路由页面

（2-2）配置路由规则 必须在对应的一级路由规则中使用children关键字来进行配置

3.注意 必须设置二级路由的路由出口 router-view (对应一级路由的页面中)

<!-- 1.在views中创建新的页面 -->
	// 2.配置路由
	{
		path:"/first",
		name:"first",
		components:Home,
		children:[
			{
				path:"/two",
				name:"two",
				components:Two
			},
		]
	}	

// 3.配置二级路由出口
	必须写在对应一级路由的页面中 --->  router-view

二级路由path配置

上边写路由的时候为path:"/"，在写二级路由的时候也可以不加"/"，但是在路由导航的时候要写成to="/一级/二级"

path 的两种写法：

1.path:"/路径" --- to="/二级"

2.path:"路径" --- to="/一级/二级"

路由导航

在页面中的一些链接通过点击之后完成页面的跳转

1.声明式--标签方式

to属性是写路径的

<router-link to="/user/profile"></router-link>

2.编程式--js方式

this.$router.push("/你要去的路径") push跳转的页面可以回退回来

this.$router.push({"/fenlei"})

this.$router.replace('/替换路径') replace是替换 跳转之后不能回退

this.$router.go(）正数前进 负数后退

重定向--redirect

 {
    path: "/",
    redirect: "/first"  // 刚打开网站时显示的页面
  },

404页面 

给用户一个页面错误提示的作用，当页面路径找不到时会出现

{
    path: '*',  // 第一个是*号，其他该如何写还是如何写
    name: 'four',  // 组件名字
    component: FourView  // 组件路径 
  },

路由模式

hash

是vue路由的默认路由模式，如果不指定，默认hash模式

history

hash和history的区别：

1.hash url带#号，history不带

2.hash 上线之后刷新不会丢失，history上线之后刷新会丢失（需要让后端服务器配置服务器的重定向）

3.hash 浏览器兼容性好，history兼容性一般

路由传参 动态路由匹配

就是把数据从一个路由页面传递到另一个路由页面

params方式

1.在需要接受数据的路由页面规则上 设置接受参数

{
	path:"/all/:xiaoming",  // 配置接收参数
	name:"all",
	component:all
}

2.发送参数

声明式

<router-link :to={name:"All",params:{xiaoming:"111"}}>点我使用传递数据给all页面</router-link>

编程式

<script>
  export default {
    methods:{
      fun(){
        // 编程式导航
        // this.$router.push({name:"你要去的路由规则的名字",params:{你在规则上配置的参数:你要传递的数据}});
       this.$router.push({name:"All",params:{xiaoming:"我是传递的数据"}})
      }
    },

    data(){
      return {
        arr:[]
      }
    }

  }
</script>

3.接受参数

在接受的页面使用this.$route.params.xxx 

<h1>新闻详情页---{{this.$route.params.xiaoming}}</h1>

query方式

1.发送

声明式

<router-link :to="{name:'Shop',query:{xiaohong:'我是query数据'}}">使用query方式把数据传递到页面</router-link>
<!-- query方式发送参数的时候  不但可以写name   还可以写成path -->
<router-link :to="{path:'/shop',query:{xiaohong:'1111'}}">使用query方式把数据传递到页面</router-link>

编程式

<script>
  export default {
    methods:{
      fun(){
        // 编程式导航
        // this.$router.push({name:"你要去的路由规则的名字",query:{你在规则上配置的参数:你要传递的数据}});
       this.$router.push({name:"All",query:{xiaoming:"我是传递的数据"}})
        // path
        this.$router.push({path:"/All",query:{xiaoming:"我是传递的数据"}})
      }
    },

    data(){
      return {
        arr:[]
      }
    }

  }
</script>

2.接受

在想使用数据的页面中 使用 this.$route.query.xxxx

<h1>新闻详情页---{{this.$route.query.xiaoming}}</h1>

query方式与params方式传参区别

1.url展示形态

params 传递参数时相对安全，不显示传递的数据key

query 传递时会显示key和val，不是很安全

2.刷新丢失

params 刷新会丢失（上线之后）

query 刷新不会丢失

3.语法区别

params：this.$route.params.xxx

query：this.$route.query.xxx

$router与$route的区别

$router 代表路由对象，是全局路由

$route 代表当前路由页面对象，局部路由