router和axios的使用

router

1、按需加载（lazy-loaded）

  {
    path: '/login',
    name: 'Login',
    component: () => import('../views/login/Login.vue')
  }

2、router的常用方法

1)useRouter方法，可以通过import引入，通过它可以获得路由实例。

const router = useRouter()

2)router.beforeEnter方法，可以在每个路由中添加，用于在进入前判断。

 {
    path: '/login',
    name: 'Login',
    component: () => import('../views/login/Login.vue'),
    beforeEnter (to, from, next) {
      (!localStorage.isLogin) ? next() : router.push({ name: 'Home' })
    }
  }

3）router.beforeEach方法，挂载在路由实例上，在每次路由前都会触发。

router.beforeEach((to, from, next) => {
  const { isLogin } = localStorage;
  (isLogin || to.name === 'Login') ? next() : next({ name: 'Login' })
})

4）router.push方法，用于在JS代码中实现路由的跳转

 router.push({ name: 'Home' })

3、登录了才能访问

实现
每次跳转前判断是否登录了。并判断下一个路由是不是登录或注册。

注意这里对to的解构

router.beforeEach((to, from, next) => {
  const { isLogin } = localStorage
  const { name } = to
  const isLoginOrRegister = (name === 'Login' || name === 'Register');
  (isLogin || isLoginOrRegister) ? next() : next({ name: 'Login' })
})

与beforeEach相对应的还有个afterEach

4、关于localStorage

5、router-link 和 a

比起写死的 会好一些，理由如下：

无论是 HTML5 history 模式还是 hash 模式，它的表现行为一致，所以，当你要切换路由模式，或者在 IE9 降级使用 hash 模式，无须作任何变动。
在 HTML5 history 模式下，router-link 会守卫点击事件，让浏览器不再重新加载页面。
当你在 HTML5 history 模式下使用 base 选项之后，所有的 to 属性都不需要写 (基路径) 了。

6、路由带id

在路由后面加个id

path:'./shop/:id'

方法1：模板字符串定义to （注意这个时候也要用v-bind绑定）

<router-link :to="`/shop/${item.id}`"></router-link>

方法2：使用对象

<router-link :to={name:'shop', params: {id: item.id}}></router-link>

详情页面通过id来获得不同的数据
id的获取(属性名‘id’和前面path定义的有关)

    const route = useRoute()
    const id = route.params.id

7、useRouter()和useRout()

前者是整个大路由，定义了路由的一系列行为，后者是当前路由对象（可以获取他的属性，比如params.id）

8、关于属性to

使用router.push()方法可以实现跳转，那么router-link和router.push()之间存在什么关系呢？
可以认为router-link标签是基于router.push()方法实现的。
当我们点击router-link标签时，内部会立刻把 to 的值传到 router.push()从而实现跳转。

router.push()的值可以有两种：一个字符串或者是描述目标位置的对象。
前者是路由配置中的字符串，后者则是{name:xxx}形式的对象。

使用对象也可以对id或者query中的数据进行约束。

常用属性：path、name、params、query

<!-- 命名的路由 -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

<!-- 带查询参数，下面的结果为 /register?plan=private -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}"
  >Register</router-link
>

9、tag属性可以将router-link标签渲染为别的标签

10、event属性

默认值: ‘click’

声明可以用来触发导航的事件。可以是一个字符串或是一个包含字符串的数组。

11、（存疑）webpackChunkName:

axios