VUE路由基础讲解

一. 什么是路由？

（vue环境）是路由和url地址的一种映射关系；

对于单页面应用程序来说，组件与组件之间的跳转规则就是路由；

Vue 路由允许我们通过不同的 URL 访问不同的内容(组件)。

通过 Vue 可以实现多视图的单页 Web 应用（single page web application，SPA）。

1. router-link：

router-link是一个组件，该组件用于设置一个导航链接，切换不同 HTML 内容。 to 属性为目标地址， 即要显示的内容。
1> to 规定跳转到的url地址

值：
     - 字符串值
         <router-link class="btn btn-default" to="/">首页</router-link>

     - 绑定属性
         <router-link class="btn btn-default" :to="{path:'/'}">首页</router-link>
         // 命名路由更推荐
         <router-link class="btn btn-default" :to="{name:'home'}">首页</router-link>

2> replace 执行页面栈的替换动作,设置 replace 属性的话，当点击时，会调用 router.replace() 而不是 router.push()，导航后不会留下记录。

2. router-view

router-view将显示与 url 对应的组件。你可以把它放在任何地方，以适应你的布局

<router-view></router-view>

3. 动态路由

路由传参使用冒号 ==:==表示；当一个路由被匹配时，它的 params 的值将在每个组件中以 this.$route.params 的形式暴露出来。因此，我们可以通过新闻 ID 获取内容。

动态路由传参：

{
	path:'/mine/:id' //首先路由允许传参
}
//如何传参
<router-link to='/mine/10'></router-link> //普通传参
<router-link :to="{path:'/mine/10'}"></router-link> //绑定传参
<router-link :to="{name:'mine',params:{id=10}}"></router-link> //命名路由传参
//路由传参的数量：
*：0个或多个
+：一个或多个
？：0个或一个
{
	path:'/mine/:id*' //传0个或多个
}

如何获取参数：
$route.params

4.路由组件的重复调用

当你从：/detail/1 -> /detail/2 的时候，因为使用的都是同一个路由组件，比起销毁重建，组件复用更有性价比！
但是，这有一个小问题：因为组件被复用，所以，生命周期钩子函数只会触发一次！
解决：

	通过监听路由参数的变化，完成响应的逻辑处理
	this.$watch(() => {
		return '你要监听的值'
	},(newValue,oldValue) => {
		// 你监听的值变化时的响应逻辑
	})

5.编程式导航(js跳转)

1> this.$router.push()
  /*
  	push('字符串') // push('/course/front')
  	push({path:'/course/front'})
  	push({name:'front'})
  	push({name:'front',params:{id:1}})
  	push({path:'/course/front',query:{id:1}})
  */
  
2> this.$router.replace()
  this.$router.replace({path:'/course/front',query:{id:1}})
  this.$router.push({path:'/course/front',query:{id:1},replace:true})

3> this.$route.go()
  this.$router.go(1) // this.$router.forward();
  this.$router.go(-1) // this.$router.back();
  this.$router.go(3)

6.嵌套路由

第一步：制作父页面导航

 <router-link :to='tab.path'v-for="tab in tabs"style="margin-right:20px;">
 	<button class="btn btn-primary">{{tab.name}}</button>
 </router-link>

第二步：定义父组件

 const Home ={
	 template:`
		 <div class='home'>
			 <pre>
			 	我是Home模拟数据
			 </pre>
		 	<router-link :to="{name:'HomeArticle'}">article</router- link>
		 	<router-link :to="{name:'HomeVideo'}">video</router-link <router-view></router-view>
		 </div>
	 `
 }

第三步：定义路由规则

 {
 path:'/',
 component:Home,
 children:[
 	//处理子路由默认不激活的情况
 	//可以重定向到一个子路由，也可以定义一个默认显示子组件 {path:',redirect:{name:'HomeArticle'}},
 	{
	 	path:'home-article',
	 	component:HomeArticle,
	 	name: HomeArticle'
 	},
 	{	
 		path:'home-video',
 		component:HomeVideo,
 		name: HomeVideo'
 	}
 },

7.不同的历史模式

1.Hash 模式
它在内部传递的实际 URL 之前使用了一个哈希字符（#）。由于这部分 URL 从未被发送到服务器，所以它不需要在服务器层面上进行任何特殊处理。不过，它在 SEO 中确实有不好的影响。如果你担心这个问题，可以使用 HTML5 模式。
2.HTML5 历史模式(推荐)
用 createWebHistory() 创建 HTML5 历史模式;
当使用这种历史模式时，URL 会看起来很 “正常”，例如 https://example.com/user/id
不过，问题来了。由于我们的应用是一个单页的客户端应用，如果没有适当的服务器配置，用户在浏览器中直接访问 https://example.com/user/id，就会得到一个 404 错误。
要解决这个问题，你需要做的就是在你的服务器上添加一个简单的回退路由。如果 URL 不匹配任何静态资源，它应提供与你的应用程序中的 index.html 相同的页面。