vue路由

简介

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

本质

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

路由创建

一级路由创建

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

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

（2-1）先把你要使用的组件页面引用
（2-2）配置路由规则

// 	import引入
 import Fenlei from '../views/fenlei.vue'

1.引入要跳转的路由页面

	// 1.全加载
const routes = [
  {
  path: '/fenlei',//url路径
  name: 'fenlei',//给这个路由规则起个名字
  component: Fenlei //引用组件
  },
]
 // 2.异步组件写法--按需加载

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

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

二级路由/多级路由创建

使用children关键字来配置

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

2.配置二级路由规则

（2-1）在router文件夹下的index.js中先引用二级路由页面
（2-2）配置路由规则 必须在对应的一级路由规则中使用children关键字来进行配置

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

   {
   	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.声明式–标签方式

<router-link to="/user/profile"></router-link>  // to属性是写路径的

2.编程式–js方式

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

3.重置和返回、前进

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

新闻详情页---{{this.$route.params.xiaoming}}

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.xxxquery：this.$route.query.xxx

$router与$route的区别

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

使用路由遇见的问题

路由跳转到同一个页面，不触发路由更新

原因

路由器认为目标路径没有改变，不会重新加载组件或刷新页面。

解决办法

1.使用 key 属性（最好用）：

<router-view :key="$route.fullPath"></router-view>

2.使用 router.replace：

this.$router.replace({ path: '/somepath' });

3.使用查询参数：

this.$router.push({ path: '/somepath', query: { timestamp: new Date().getTime() } });

​