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

      

      

  • 相关阅读:
    扩展方法 之 Asp.Net篇【转】
    PowerDesiGner数据库设计
    DataFormatString格式化字符串的总结
    C#序列化对象为XMl于反序列化
    c# 反射初探【转】
    事件驱动的javascript 【转】
    每日一题力扣598
    每日一题力扣283
    每日一题力扣189数组的旋转 取模这个想法好棒!
    每日一题力扣119杨辉三角
  • 原文地址:https://www.cnblogs.com/mcll/p/9708727.html
Copyright © 2011-2022 走看看