zoukankan      html  css  js  c++  java
  • vue 路由的安装及使用

    安装:

      1.cmd下输入: npm install vue-router --save //安装路由
      2.npm run dev //重新启动

    使用:
      1.在mian.js下引入,使用,配置路由

         import VueRouter from 'vue-router'
              Vue.use(VueRouter)

        const router(定义一个名字)=new VueRouter({

          routes:[
            {path:"(路由)",component:跳转的位置},
            {path:"/",component:VueRouter}, //跳转的位置要引进来(import VueRouter from 'vue-router')
            {path:"路由",name:'取个名字',component:跳转的位置}, //输入个name,用于绑定个名字
            {path:"/about(路由)",name:'取个名字',component:跳转的位置,children:[
            {path:"/about/aboutour(路由)",name:'取个名字',component:跳转的位置},
            {path:"/aboutour(路由)",name:'取个名字',component:跳转的位置}]}, //二级路由
            {path:"(路由)",component:跳转的位置,beforeEnter: (to, from, next) => {
               例如:alert('非登录状态禁止访问页面');
               next(false); //禁止跳转到此页面
            }},//路由独享守卫 针对指定页面 全局守卫也可以在此写
            {path:"路由",name:'取个名字',components:{
              default:'原本要跳转的',
              '取的名字':取的名字,
              '取的名字':取的名字
            }},//一个页面想要另外一个页面的某些东西 在原本页面写入<route-view name="取个名字"></route-view>
            {path:'*',redirect:'/'} //如果用户输入错误,默认展示页
          ],
          mode:"history" //去掉后面的#号
       })

      

      

  • 相关阅读:
    ISO14229:2013 之 通过标志输入输出控制InputOutputControlByIdentifier (0x2F)
    ISO14229:2013 之 清除诊断信息ClearDiagnosticInformation (0x14)
    ISO14229:2013 之 通过标志写数据WriteDataByIdentifier (0x2E)
    Git常用命令及方法大全
    High concurrency Architecture Detailed _ Architecture
    Data structures and algorithms in Java, Part 1: Overview
    Java代码优化
    详解二分查找算法
    服务容灾
    分布式限流之一:redis+lua 实现分布式令牌桶,高并发限流
  • 原文地址:https://www.cnblogs.com/mcll/p/9708727.html
Copyright © 2011-2022 走看看