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" //去掉后面的#号
       })

      

      

  • 相关阅读:
    iOS 字符串删除 DOM
    mac版本cornerstone的无限期破解方法【转】
    【用xocde5打包 在IOS7以下也能显示无默认gloss 效果 图解】
    android 选择图片或拍照时旋转了90度问题
    部分Android手机拍照后照片被旋转的解决方案
    随笔分类
    Android 系统工具类SystemUtils
    反编译apk
    Android Studio导入第三方类库的方法
    Android压缩图片到100K以下并保持不失真的高效方法
  • 原文地址:https://www.cnblogs.com/mcll/p/9708727.html
Copyright © 2011-2022 走看看