vue基础路由的使用

1.在 router 下的 index.js 文件中配置路由，下面我配置了两个路由

2.在App.vue中使用，但是写到这里只能通过手动输入1中的  path 回车进行路由跳转，路由点击自动跳转继续往下看

3.在vue-router里面提供了一个useRouter方法，通过获取路由实例然后通过路由实例的push()方法进行页面跳转。以登录页面为例，为登录按键绑定  handleLoginClick方法。

4.在vue-router中提供了 router.back()  方法  一般用于返回按钮

5.商品店铺的路由跳转 以及携带店铺id

5.1商品店铺的路由跳转

组件外部有路由链接的话 v-for遍历循环要写到 router-link 里 ，同时rouetr-link 会给外层加上一个 a 标签，导致有下划线，解决办法  a.{ text-decoration :none }

5.2 携带店铺id

首先路由配置项后面要携带id

2.路由跳转携带id

 3.发送axios请求get  , 在useRoute中记录了访问路径的信息，而 useRouter是路由的全部信息

toRef可以修改对象属性

 

 进阶路由   导航守卫（应用实例：没有登录在登录页面，登录了继续执行router.push）

     1.beforeEach函数   （全局前置守卫）

       router上面整体加一个beforeEach函数（在路由切换时执行）该函数接收3个参数

       获取本地存储状态，name=to.name  如果已经登录，或者访问的页面是登录或是注册页则       进行跳转，否则进入登录页面

   2.beforeEnter函数    （路由独享守卫）

      在每个路由项下面可以写一个beforeEnter函数  （在进入路由之前执行）该函数接收3个参数

      实现如下功能：已登录将不能进入登录页面