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

      

      

  • 相关阅读:
    (转)投票系统,更改ip刷票
    图像判断(转)
    第06组 Alpha事后诸葛亮
    第06组 Alpha冲刺(6/6)
    2019 SDN上机第4次作业
    第06组 Alpha冲刺(5/6)
    第06组 Alpha冲刺(4/6)
    第06组 Alpha冲刺(3/6)
    第06组 Alpha冲刺(2/6)
    2019 SDN上机第3次作业
  • 原文地址:https://www.cnblogs.com/mcll/p/9708727.html
Copyright © 2011-2022 走看看