SpringBootVue（十二）前端路由VueRouter

　　1.VueRouter基本概念
　　Vue-Router是 Vue.js官方的路由插件，让用 Vue.js 构建单页应用变得轻而易举。功能包括： 嵌套路由映射动态路由选择模块化、基于组件的路由配置路由参数、查询、通配符展示由 Vue.js 的过渡系统提供的过渡效果细致的导航控制自动激活 CSS 类的链接HTML5 history 模式或 hash 模式可定制的滚动行为URL 的正确编码
　　Vue比较适合单页面的项目，所有的网页的内容都是通过一个Html页面进行切换。在这个Html页面中通过不同的路由来控制不同组件的显示，这个控制就需要Vue-Router来完成。
　　Vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射（对应联系）起来，访问不同的路径就显示不同的组件。
　　典型单页面运用
　　所有内容都在一个Html页面显示，每个标题都是一个组件，点击后在不同组件中进行内容切换，显示不同内容。
　　Vue-Router目前有两个版本。3.X版本 和 4.X 版本Vue-Router3.X 版本只能结合Vue2使用；Vue-Router4.X 版本只能结合Vue3使用；
　　Vue-Router的安装
　　Vue-Router3.X 版本 : npm install vue-router@3
　　Vue-Router4.X 版本 : npm install vue-router@4
　　官方文档： https://router.vuejs.org/zh/
　　如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能：import Vue from ＂vue＂import VueRouter from ＂vue-router＂ Vue.use(VueRouter)
　　2.实例演示：创建一个新的项目（本例使用Vue2），具体安装过程见前面笔记（九）
　　将刚刚创建的项目 vuerouter-demo 拖入 Visual Studio Code 中。目前项目中还没有 Vue-Router 需要进行安装。
　　注意：本例由于使用的是 Vue2，所以要安装vue-router3
　　在Visual Studio Code 中终端中输入如下命令：npm install vue-router@3
　　安装完成后在 package.json 中及可以看到 vue-router3
　　创建路由组件：
　　下面模拟网易音乐的界面，在项目components文件夹中自定义Discover.vue、Friends.vue、My.vue三个组件，并用Vue-Router来控制它们像是与切换。
　　Discover.vue：
　　Friends.vue
　　My.vue
　　三个组件都需要链接对应关系，这就需要用Vue-Router来描述。 声明路由链接和站位标签
　　可以使用标签来声明路由链接，并使用标签来声明路由站位符。
　　我们在根组件 App.vue 中进行路由的跳转，代码如下：   发现音乐  关注  我的音乐
　　这时App组件上就有三个按钮，有兴趣可以用CSS进行样式美化。这个时候可以点击但是还无法跳转。因为定义的链接和三个组件的对应关系还没有设置。应为对应关系比较复杂，可以放到单独的 js 文件中写。创建路由模块
　　在项目 src 中创建一个 router 文件夹，在里面新建一个名为 index.js 路由模块，在里面定义对应关系,代码如下：//导入Vue和VueRouter import VueRouter from ＂vue-router＂; import Vue from ＂vue＂; //导入组件 import Discover from ＂../components/Discover.vue＂ import Friends from ＂../components/Friends.vue＂ import My from ＂../components/My.vue＂ //将VueRouter设置为vue的插件 Vue.use(VueRouter)  const router = new VueRouter({  //指定hash属性与组件的对应关系  routes:[  {path:＂/discover＂,component:Discover},  {path:＂/friends＂,component:Friends},  {path:＂/my＂,component:My},  ] })
　　path对应链接；comment对应组件。
　　此时，组件要显示到哪里去？这就需要站位标签。需要组件在哪里显示就放到哪里。我们以放到根组件 App.vue 举例，代码如下：
　　一旦用户点击了＂发现音乐＂，浏览器就会跳转的 discover 。根据前面路由的定义discover 对应的是 Discover 组件。这时Discover 组件的内容就会被渲染到这个位置，从而完成界面的跳转切换。
　　下面需要在 index.js 中将路由导出，代码如下：export default router
　　最后在main.js 中导入并设置，代码如下：import Vue from ＂vue＂ import App from ＂./App.vue＂ import router from ＂./router/index＂  Vue.config.productionTip = false  new Vue({  render: h => h(App),  router:router }).$mount(＂#app＂)
　　运行 npm run serve 启动项目。
　　我们发现没有显示下面的视图，点击＂发现音乐＂等，链接才会切换，这就可以显示出来了。
　　第一次加载是到首页，如果这个时候加载组件就没有内容显示，这样也不合适。实际项目中会指定一个默认加载的组件。如网易云音乐中，进入首页默认是进入＂发现音乐＂组件。
　　3.vue-router进阶路由重定向
　　用户在访问地址A的时候，强制用户跳转到地址B，从而显示特定组件的页面。
　　通过路由规则的 redirect 属性，指定一个新的路由地址，可以很方便地设置路由的重定向。
　　例如将首页重定义为显示＂发现音乐＂组件{path:＂/＂,redirect:＂/discover＂},
　　嵌套路由
　　可以在组件下再嵌套组件，比如在＂发现音乐＂下再嵌套＂推荐＂、＂歌单＂等子路由。
　　在Discover.vue组件中，声明 toplist 和 playlist 的子路由链接以及子路由占位符，代码如下：
　　这个时候就需要新建 Toplist 和 Playlist 两个组件。
　　然后在 index.js 中引入Toplist 和 Playlist 两个组件，然后通过 children 属性嵌套声明子路由的方式来设置对应关系。这时index.js 完整代码如下：//导入Vue和VueRouter import VueRouter from ＂vue-router＂; import Vue from ＂vue＂; //导入组件 import Discover from ＂../components/Discover.vue＂ import Friends from ＂../components/Friends.vue＂ import My from ＂../components/My.vue＂ import Toplist from ＂../components/Toplist.vue＂ import Playlist from ＂../components/Playlist.vue＂ //将VueRouter设置为vue的插件 Vue.use(VueRouter)  const router = new VueRouter({  //指定hash属性与组件的对应关系  routes:[  //当用户访问 / 时，调转到 /discover  {path:＂/＂,redirect:＂/discover＂},  {path:＂/discover＂,  component:Discover,  //通过 children 属性，可以嵌套声明子路由  children:[  {path:＂toplist＂,component:Toplist},  {path:＂playlist＂,component:Playlist},  ]  },  {path:＂/friends＂,component:Friends},  {path:＂/my＂,component:My},  ] })  //导出默认路由 export default router
　　动态路由
　　很多路由链接，如下：商品1 商品2 商品3const router = new VueRouter({  //指定hash属性与组件的对应关系  routes:[  {path:＂prodect/1＂,component:Prodect},  {path:＂prodect/2＂,component:Prodect}, {path:＂prodect/3＂,component:Prodect},  ]  },  {path:＂/friends＂,component:Friends},  {path:＂/my＂,component:My},  ] })
　　上述方式复用性非常差。
　　思考：如有一个商品列表，当用户点商品的时候就跳转到该商品的详情，每一个商品都会有商品详情，不可能给每一个商品写一个商品详情的组件。这时就希望跳转到详情组件的时候重用组件里面的东西。
　　动态路由：就是把Hash地址中可变的部分定义为参数项，从而提高路由规则的复用性。在 vue-router 中使用英文的冒号 （ : ）来定义路由参数项，如下：{path : ＂/prodect/:id,component:Prodect＂}
　　下面进行实例演示：
　　1.有商品就需要先建一个商品组件：Prodect.vue
　　2.假设商品组件是基于 My.vue 组件的子路由，修改 My.vue 组件，如下：
　　3.在 index.js 中设置对应关系，先导入 Prodect.vue 组件import Prodect from ＂../components/Prodect.vue＂
　　4.使用 children 属性定义跳转，代码如下：{path:＂/my＂,  component:My,  children:[  {path:＂:id＂,component:Prodect},  ]  },
　　5.启动项目，在浏览器中就可以显示效果：点击＂我的音乐＂，然后在显示的商品1/2/3 中任点 一个，都可以显示＂商品＂这个内容出来。
　　现在有一个问题，在跳转到 Prodect.vue 组件时，如何知道需要显示商品几的详情呢？
　　解决方法：
　　方法1：通过动态路由匹配的方式渲染出来的组件中，可以使用 $route.params 对象访问到动态匹配的参数项，比如在商品详情组件的内部，根据 id 值，请求不同的商品数据。修改代码如下：
　　这时，点击不同的商品就显示出是商品几的详情
　　方法2：为了简化路由参数的获取形式，vue-router 允许在路由规则中开启 props 传参，index.js 中修改示例代码如下：{path:＂:id＂,component:Prodect,props:true},
　　Prodect.vue 组件修改如下：首先定义一个参数 id ；然后就不需要 $route.params，可以直接用于 id 来传递参数了，浏览器显示效果同上。
　　编程式导航（在此仅作了解,后面的综合运用中再详细演示）
　　声明式导航：
　　编程式导航：router.push(...)
　　除了使用创建 a 标签来定义导航链接，还可以借助 router 的实例方法，通过编写代码来实现。
　　想要导航到不同的 URL ，可以使用 router.push 方法。这个方法会向 history 栈添加一个新的记录。所以，当用户点击浏览器＂后退＂按钮时，则回到之前的 URL 。
　　当点击 时，这个方法会在内部调用。所以，点击等同于调用router.push(...) 。
　　导航守卫
　　导航守卫可以控制路由的访问权限
　　比如还没有登录就想跳转到订单页面，这时可以用路由守卫进行统一控制。
　　全局导航守卫会拦截每个路由规则，从而对每个路由进行访问权限控制。可以使用 router.beforeEach 注册一个全局前置守卫：router.beforeEach(( to,from,next )=>{  if ( to.path === ＂/main＂ && !isAuthenticated){  next( ＂/login＂ )  }  else{  next()  } })
　　to：即将进入目标
　　from：当前导航正要离开的路由
　　在守卫方法中，如果声明了 next 形参，则必须调佣 next()函数，否则不允许用户访问任何一个路由
　　直接放行：next()
　　强制停留在当前页面：next(false)
　　强制跳转到登录页面：next( ＂/login＂ )