SpringBoot + Vue（十二）前端路由VueRouter

　　Vue-Router是 Vue.js官方的路由插件，让用 Vue.js 构建单页应用变得轻而易举。功能包括：

　　Vue比较适合单页面的项目，所有的网页的内容都是通过一个Html页面进行切换。在这个Html页面中通过不同的路由来控制不同组件的显示，这个控制就需要Vue-Router来完成。

　　Vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射（对应联系）起来asp技术，访问不同的路径就显示不同的组件。

　　所有内容都在一个Html页面显示，每个标题都是一个组件，点击后在不同组件中进行内容切换，显示不同内容。

　　这时App组件上就有三个按钮，有兴趣可以用CSS进行样式美化。这时候点击但是还无法跳转。因为定义的链接和三个组件的对应关系还没有设置。因为对应关系比较复杂，可以放到单独的 js 文件中写。

　　在项目 src中创建一个 router 文件夹，在里面新建一个名为 index.js 路由模块，在里面定义对应关系,代码如下：

　　此时，组件要显示到哪里去？这就需要站位标签。需要组件在哪里显示就放到哪里。我们以放到根组件 App.vue 举例，代码如下：

　　一旦用户点击了“发现音乐”，浏览器就会跳转的 discover 。根据前面路由的定义discover 对应的是 Discover 组件。这时Discover 组件的内容就会被渲染到这个位置，从而完成界面的跳转切换。

　　第一次加载是到首页，如果这个时候加载组件而没有内容显示，这样也不合适。实际项目中会指定一个默认加载的组件。如网易云音乐中，进入首页默认是进入“发现音乐”组件。

　　通过路由规则的 redirect 属性，指定一个新的路由地址，可以很方便地设置路由的重定向。

　　思考：如有一个商品列表，当用户点商品的时候就跳转到该商品的详情，每一个商品都会有商品详情，不可能给每一个商品写一个商品详情的组件。这时就希望跳转到详情组件的时候重用组件里面的东西。

　　动态路由：就是把Hash地址中可变的部分定义为参数项，从而提高路由规则的复用性。在 vue-router 中使用英文的冒号 （ : ）来定义路由参数项，如下：

　　5.启动项目，在浏览器中就可以显示效果：点击“我的音乐”，然后在显示的商品1/2/3 中任点 一个，都可以显示“商品”这个内容出来。

　　方法1：通过动态路由匹配的方式渲染出来的组件中，可以使用 $route.params 对象访问到动态匹配的参数项，比如在商品详情组件的内部，根据 id 值，请求不同的商品数据。修改代码如下：

　　方法2：为了简化路由参数的获取形式，vue-router 允许在路由规则中开启 props 传参，index.js 中修改示例代码如下：

　　Prodect.vue 组件修改如下：首先定义一个参数 id ；然后就不需要 $route.params，可以直接用于 id 来传递参数了，浏览器显示效果同上。

　　除了使用创建 a 标签来定义导航链接，还可以借助 router 的实例方法，通过编写代码来实现。

　　想要导航到不同的 URL ，可以使用 router.push 方法。这个方法会向 history 栈添加一个新的记录。所以，当用户点击浏览器“后退”按钮时，则回到之前的 URL 。

　　全局导航守卫会拦截每个路由规则，从而对每个路由进行访问权限控制。可以使用 router.beforeEach 注册一个全局前置守卫：

　　在守卫方法中，如果声明了 next 形参，则必须调佣 next()函数，否则不允许用户访问任何一个路由asp代码代表什么意思啊英文翻译中文怎么读出来把商品加入购物车的asp代码