7-2 7.2重定向和使用别名ppt课件 Vue.js基础与应用开发实战（微课版）.pptx

7-2 7.2 重定向和使用别名教学课件 Vue.js基础与应用开发实战（微课版）7.2 重定向和使用别名7.2.1 重定向Vue的重定向功能通过routes配置path和redirect来完成，下面的代码是从/x重定向到/home。const router=new VueRouter(routes:path:/x,redirect:/home )7.2.1 重定向重定向的目标也可以是一个命名的路由，示例代码如下：const router=new VueRouter(routes:path:/x,redirect:name:home )也可以是一个方法，动态返回重定向目标，示例代码如下：const router=new VueRouter(routes:path:/x,redirect:to=/方法接收“目标路由”作为参数 /return重定向的字符串路径/路径对象 return/home )对于不识别的URL地址来说，常常使用重定向功能，将页面定向到首页显示。【实例7-2】使用Vue的重定向功能实现单击超链接显示对应的页面内容【操作要求】使用Vue的重定向功能实现单击超链接显示对应的页面内容：（1）打开网页时默认显示内容“打开网站主页”。（2）单击页面的【登录】超链接时，页面显示对应的内容“打开登录页面”。（3）单击页面的【注册】超链接时，页面显示对应的内容“打开注册页面”。（4）单击页面的【主页】和【不存在的链接】超链接时，页面都会显示“打开网站主页”内容，即对于不识别的URL地址，使用重定向功能将页面定向到首页显示。【实现过程】创建网页0702.html，在该文件中编写以下代码实现要求的功能。主页 登录 注册 不存在的链接 【实现过程】const Home=template:打开网站主页 const Login=template:打开登录页面 const Register=template:打开注册页面 const NotFound=template:网页没有找到 const routes=path:/home,component:Home,path:/login,component:Login,path:/register,component:Register,path:*,redirect:/home,【实现过程】const router=new VueRouter(routes )const vm=new Vue(el:#app,router )【实现过程】打开该网页时，HTML将被渲染为：主页 登录 注册 不存在的链接 打开网站主页打开包含重定向功能的网页0702.html时，默认显示“打开网站主页”内容如图7-2所示。图图7-2 打开网页打开网页0702.html时默认显示时默认显示“打开网站主页打开网站主页”内容内容7.2.2 使用别名重定向是指，当用户访问/x时，URL将会被替换成/y，然后匹配路由为/y。那么别名是什么呢？/a的别名是/b，意味着，当用户访问/b时，URL会保持为/b，但是路由匹配则为/a，就像用户访问/a一样。7.2.2 使用别名上面对应的路由配置为：const router=new VueRouter(routes:path:/a,component:A,alias:/b )7.2.2 使用别名“别名”的功能可以自由地将UI结构映射到任意的URL，而不是受限于配置的嵌套路由结构。处理首页访问时，常常将index设置为别名，比如将/home的 别 名 设 置 为/index。但 是，要 注 意 的 是，的样式在URL为/index时并不会显示。因为，router-link只识别出了home，而无法识别index。快乐学习！高效学习！快乐学习！高效学习！祝学习进步！祝学习进步！