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

  

  

posted on 2018-09-26 18:08  旺仔小裤头  阅读(5134)  评论(0编辑  收藏  举报