vue 路由

一、路由基本配置

• 安装vue-router   npm install vue-router
• 引入vue-router   import VueRouter  from 'vue-router'  （main.js实现）
• 注册vue-router   Vue.use(VueRouter ) （main.js实现）

注册完之后等同于全局注册了两个组件。

RouterLink 和RouterView。这两个组件，在vue中，还有另外的写法：router-link 与router-view

//某个vue component具体使用
<template>
  <div>
    <div class="footer_wrap">
      <router-link to="/user">用户</router-link>
      <router-link to="/blog">文章</router-link>
    </div>
    <div >
      <router-view></router-view>
    </div>
  </div>
</template>

• 定义路由数组 （main.js实现）

 const routes= [{
      path: "/user",
      component: User
    },{
      path: "/blog",
      component: Blog
    }]
  

   上述路由数组中的component:User ;component:Blog 需要自己定义来实现。并在同一个文件中引入。

• 生成路由对象（main.js实现）

    const router = new VueRouter({
      routes
    })

• 路由对象注入到vue实例中, this可以访问$route和$router（main.js实现）第五部分，有使用this.$router

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

二、路由进一步理解

• 路由模式：

    const router = new VueRouter({
      routes,
      mode:'hash', //默认采用hash模式
      //mode:'history',
      //mode: 'abstract'
    
    })

采用默认hash模式时候：

      <router-link to="/user">用户</router-link>
      <router-link to="/blog">文章</router-link>

       这两种模式等同于

      <a href="#user">用户</a>

      <a href="#blog">文章</a>

      点击“用户”或者文章时候，页面URL为：

      http://ip:port/#/user

      http://ip:port/#/blog

 采用history模式时候：

（1）history其实更美观

（2）history需要后端配合

（3）history 转化为a链接时候，其实实现了取消默认跳转行为，不然就跳转到

      <router-link to="/user">用户</router-link>
      <router-link to="/blog">文章</router-link>

       这两种模式等同于

      <a href="/user">用户</a>

      <a href="/blog">文章</a>

      点击“用户”或者文章时候，页面URL为：

      http://ip:port/user

      http://ip:port/blog

 采用abstract模式时候： 该模式用到非浏览器环境中，不做推荐。

三、激活状态 

现在路由数组中有三个路由：当访问/user时候，/能够模糊匹配上，/user能够精确匹配

/	模糊匹配，对应的a标签会添加  router-link-active 类选择器
/user	精确匹配 ,  对应的a标签会添加  router-link-active    router-link-exact-active 类选择器
/blog	完全匹配不上，什么都不添加

当访问/时候，/能够精确匹配上

/	精确匹配，对应的a标签会添加  router-link-active    router-link-exact-active 类选择器
/user	完全匹配不上
/blog	完全匹配不上

• 如果想让模糊匹配上的，不带  router-link-active样式。需要对应RouterLink加  exact:true

  <router-link to="/"  exact=true>用户</router-link>

• 如果想更换router-link-active  为selected ,   router-link-exact-active 为 e-selected

(就是改个名字出现）

  <router-link
       to="/"  
       exact=true   
       active-class='selected'  
       exact-active-class='e-selected' >
       用户
  </router-link>

四、命名路由

 Vue中，你可以为路由配置对象指定一个名称（命名路由），以便在代码中或模板中更方便地引用这个路由。命名路由的使用有助于提高代码的可读性和维护性。

const routes = [
  {
    path: '/',
    component: Home,
    name: 'home' // 这里是命名路由的地方
  },
  {
    path: '/about',
    component: About,
    name: 'about'
  },
  {
    path: '/contact',
    component: Contact,
    name: 'contact'
  }
];

在上面的例子中，每个路由配置对象都包含一个 name 属性，用于指定路由的名称。这样，你可以通过名称来引用路由，而不必依赖于路径字符串。在组件中使用命名路由的例子：

<!-- 使用 router-link 组件 -->
<router-link :to="{ name: 'home' }">Home</router-link>
<router-link :to="{ name: 'about' }">About</router-link>
<router-link :to="{ name: 'contact' }">Contact</router-link>

五、push和replace方法导航

除了使用<router-link :to="{ name: 'home' }">Home</router-link>进行路由导航外，还可以使用push,replace方法。

// 使用 router 对象的 push 或 replace 方法
methods: {
  goToHome() {
    //this.$router.push({ name: 'home' });
    this.$router.push('/home');
  }
}

// 使用 router 对象的 push 或 replace 方法
methods: {
  goToHome() {
    //this.$router.replace({ name: 'home' });
    this.$router.replace('/home');
  }
}

两者的区别，在于回退的时候，如果是push ,还能够回退当前路由，如果是replace不能回退到当前路由

六、 二级路由

const routes = [
  {
    path: "/", // 默认hash值路径
    redirect: "/home" // 重定向到/find
  },
  {
    path: "/home",
    name: "Home",
    component: Home,
    children: [
      {
        path: "recommend",
        component: Recommend
      },
      {
        path: "ranking",
        component: Ranking
      }
    ]
  },
  {
    path: "/about",
    name: "About",
    component: About
  }]

当浏览器中输入 http://ip:port 时候，会自动跳转到  http://ip:port/#/home

如果访问http://ip:port/#/home/recommend时候，则会用Recommend组件渲染。

七、路由守卫

场景: 当你要对路由权限判断时
语法: router.beforeEach((to, from, next)=>{//路由跳转"之前"先执行这里, 决定是否跳转})
参数1: 要跳转到的路由 (路由对象信息)    目标
参数2: 从哪里跳转的路由 (路由对象信息)  来源
参数3: 函数体 - next()才会让路由正常的跳转切换, next(false)在原地停留, next("强制修改到另一个路由路径上")
注意: 如果不调用next, 页面留在原地

// 例子: 判断用户是否登录, 是否决定去"我的主页"/index
const isLogin = true; // 登录状态(未登录)
router.beforeEach((to, from, next) => {
  if (to.path === "/index" && isLogin === false) {
    alert("请登录")
    next(false) // 阻止路由跳转
  } else {
    next() // 正常放行
  }
})