浅谈vue两者导航

VueRouter结合vue-cli

• 官网：https://router.vuejs.org/zh/
• 创建项目：
  vue create myvue
  • 在package.json之中配置脚本指令 npm start
    "start":"npm run start

创建路由 =>(route/index.js) =>里面存放着是关于路由的相关！

• 安装路由：
  npm i vue-router

  • 引入：在入口文件中引入 main.js => 但是会把这个提取到index.js，使得main.js文件干净明了
    import VueRouter from "vue-router"

  • 使用：在入口文件中引入 main.js => 但是会把这个提取到index.js，使得main.js文件干净明了
    Vue.use(VueRouter) //使用VueRouter

  • 实例化配置参数：在入口文件中引入 main.js => 但是会把这个提取到index.js，使得main.js文件干净明了

      import Login from "路径"
      const router = new VueRouter({
        // mode:"hash | history", => 默认是hash路由 上线的时候，为history路由，需要配置服务器！
        routes:[
          {
            path:"/",
            redirect:XXX,//重定向到那个 默认的路径
          },
          {
            path:"/login", //根据这个hash匹配的url 为/login时候，显示login组件内容！
            component:Login,//需要 引入 Login组件 
          }
        ]
      })
    

  • 把router实例对象挂载在Vue实例身上在入口文件中引入 main.js

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

  • 显示路由：需要在哪里显示，就写在哪里！ eg:在Vue.app
    • => 路由的坑，根据匹配的path，显示组件

    <div id="app">
      <router-view></router-view>
    </div>
  

  • 路由跳转：需要在哪里显示，就写在哪里！ eg:在Vue.app

router之中的配置参数

• routes:
  • name：设置路由名称，方便执行路由跳转
  • path：访问这个页面的路径
  • component：指定路由组件（显示到<router-view/>中的组件）
  • components：在多视图组件中，给每个命名视图指定路由组件
    一般用于多个view-router的场景
  • props（Boolean|Object|Function）：路由组件传参
  • redirect（String|Object）：重定向
  • children（Array）：嵌套路由配置
    子路由一般使用相对路径的path,不需要添加 /

显示路由内容之 的配置参数

• 目的：用于显示component路由组件内容
  • name 命名视图（默认：default）

导航

声明式导航

• 原理：利用内置组件标签来实现路由跳转 <router-link></router-link>
• router-link的配置参数
  • to（Sting|Object）：设置目标路由的链接。 点击后，跳到目标路由
  • tag：让<router-link> 渲染成某种标签（默认：a）
  • active-class：匹配路由时<router-link>使用的类名
  • exact-active-class：精确匹配路由时<router-link>使用的类名
  • replace： 跳转到目标路由且不留下 history 记录
  • event: 触发路由的事件（默认：click） => event="mouseover"
• 一个使用声明式创建的导航

    <div>
    <nav>
      <ul>
        <li>
          <router-link
            tag="div"
            v-for="(item) in menu"
            :key="item.path"
            :to="item.path"
            event="mouseover"
          >{{item.text}}</router-link>
        </li>
      </ul>
    </nav>
  
    <router-view />
  </div>
  

编程式导航

• 原理：利用事件 + $router.方法 来实现路由的跳转！

  • $router这是router对象 挂载在Vue实例对象的时候，成为了Vue实例对象的属性，因此可以使用this来访问到！
  • $router.push(“路径”) => 点击后，显示当前的路径 对应的组件,带有历史记录
  • $router.replace(location) => 点击后，显示当前的路径 对应的组件,不带有历史记录
  • $router.go(n)/$router.back()/$router.forward()

• 一个简单的nav编程式导航

  <li
    @click="change(item.path,idx)"
    v-for="(item,idx) in menu"
    :key="item.path"
    :class="{currentActive:currentIndex===idx}"
  >{{ item.text }}</li>
  

  methods: {
    change(path, idx) {
      this.currentIndex = idx;
      // console.log(idx);
      this.$router.push(path);
    },
  },