VUE - 路由的使用和重定向

什么是路由：

• 后端路由: 对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源
• 前端路由：对于单页面应用程序来说，主要通过URL中的hash（#号）来实现不同页面之间的切换

前端路由的后端路由的区分

后端路由：

当我们在浏览器中输入http://192.168.1.200:8899/index.html来访问界面的时候，web服务器就会接收到这个请求，然后把index.html解析出来，并找到相应的index.html并展示出来，这就是路由的分发

前端路由

通过改变URL，在不重新请求页面的情况下，更新页面视图。

PS：
后端路由每次访问一个页面都要向浏览器发送请求，然后服务端再响应解析，这个过程就会存在延迟，但是对于前端路径来说只是访问一个新的界面，只是浏览器的路径发生了改变，没有和服务器进行交互(所以不存在延迟)

路由的创建和使用：

在使用Vue路由之前，我们必须要载入Vue-router库

<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
	<h1>Hello App!</h1>
	<p>
	<!--通过router-link组件来导航-->
	<!--通过传入 to 属性指定链接-->
	<router-link to="/Foo"> Go To Foo</router-link>
	<router-link to="/Bar"> Go To Bar</router-link>
	</p>
	<!--路由出口,路由匹配到的组件将渲染在这里-->
	<router-view></router-view>
	
</div>

<script>
	//1.定义组件模板对象：
	var Foo ={
		template:'<h1>foo</h1>
}
	var Bar={
		template:'<h1>bar</h1>
}

//2.创建一个路由对象，当引入vue-router 包之后，在window全局对象中，就有了一个路由的构造函数，叫做vueRouter 在 new 鲈鱼对象的时候，可以为构造函数传递一个配置对象
	var routerObj=new VueRouter({
	routes:[
	//路由匹配规则： 每个路由规则，都是一个对象，这个规则身上必须有两个属性
	 //  属性1 是 path， 表示监听 哪个路由链接地址；
    //  属性2 是 component， 表示，如果 路由是前面匹配到的 path ，则展示 component 属性对应的那个组件
    // 注意： component 的属性值，必须是一个 组件的模板对象， 不能是 组件的引用名称；
	{path:'/foo',component:Foo},
	{path:'/bar',component:Bar}


]
})

  var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      router: routerObj
    });
</script>

路由的重定向和别名

为什么要进行重定向

当我们没有为路由进行重定向的时候 默认进入网页的时候显示的是根路径。
然后我做了一个操作就是添加了一行代码：

{path:'/',component:login},
{path:'/login',component:login},
{path:'/register',component:register}

这样出现的问题就是 同样是login 会出现两个不同的地址，用户就会产生疑问？
最好的解决办法就是：路由重定向

var router=new VueRouter({
	routes:[
	{path:'/',redirect:'/login'},
	{path:'/login',component:login},
	{path:'/register',component:register}
]
})

PS: 重定向的目标也可以是一个命令的路由：

var router =new VueRouter(
{
	routes:[
	{path:'/',redirect:{name:'foo'}},
]
}
)

来源：CSDN

作者：赫于富

链接：https://blog.csdn.net/qq_30631063/article/details/103895760