0
点赞
收藏
分享

微信扫一扫

Vue-cli和Vue-router

ITWYY 2021-09-27 阅读 78

vue-cli脚手架

构建spa应用步骤

  • npm install -g vue-cli
  • vue init webpack demoname
  • vue init webpack-simple demoname
  • npm install 安装依赖

打包

  • 打开发包 npm run dev
  • 打生产包 npm run build

vue-router(路由)

安装vue-router

结构补充

路由步骤:
一、在components目录下面新建模板Hi.vue
<template>
  <div>
      <h2>{{msg}}</h2>
  </div>
</template>
<script>
    export default{
        data(){
            return{
               msg: "Hi Page!"
            }
        }
    }
</script>
template内部要有个父标签,这是vue2.0的规范
其中,data是个匿名函数,是es6的简化写法,等价于:
data:function(){}.

二、在index.js文件中新建路由
{
      path: '/Hi',
      name: 'Hi',
      component: Hi
}
注意,要导入Hi模板文件
import Hi from '@/components/Hi'

三、针对App.vue的解释
<router-view/>是显示路由组件内容的,
<router-link to="/Hi">Hi页面</router-link>
类似于a标签,to类似与herf。

子路由

一、新建子路由文件Hi1.vue和Hi2.vue
如下:
<template>
  <div>
      <h2>{{msg}}</h2>
  </div>
</template>
<script>
    export default{
        data:function(){
            return{
               msg: "Hi1 Page!"
            }
        }
    }
</script>

二、在父路由的vue文件中添加view
<template>
  <div>
      <h2>{{msg}}</h2>
      <router-view></router-view>
  </div>
</template>
此时添加了<router-view></router-view>用于显示子路由的内容。

三、在index.js文件中导入和使用
导入:
import Hi1 from '@/components/Hi1'
import Hi2 from '@/components/Hi2'
使用:
{
      path: '/Hi',
      name: 'Hi',
      component: Hi,
      children:[
        {path:'Hi1',name:'Hi1',component:Hi1},
        {path:'Hi2',name:'Hi2',component:Hi2},
      ]
}
说明:此时Hi1和Hi2就是子路由对应的模板
使用children声明子路由,是数组类型,内部是
对象用大括号包裹,例如:{path:'Hi1',name:'Hi1',component:Hi1},注意子路由的path不添加/符号。

参数传递

方式一(使用name传递参数,不常用)

方式二(通过<router-link> 标签中的to传参)

对比正常路由和参数路由写法的区别,<router-link to="/Hi/Hi1">Hi1页面</router-link>|
<router-link :to="{name:'Hi2',params:{username:'zengqiang'}}">Hi2页面</router-link>|

说明:绑定参数时候to属性要加上:,而且name不是/Hi/Hi2而是对应index.js中的对应的name。

命名路由

const router = new VueRouter({
  routes: [
    {
      path: '/user/:userId',
      name: 'user',
      component: User
    }
  ]
})
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
等效于:
router.push({ name: 'user', params: { userId: 123 }})

单页面多路由区域操作(命名视图)

基本案例:index.js
routes: [
    {
      path: '/',
      name: 'HelloWorld',
      components: {
        default:HelloWorld,
        left:Hi1,
        right:Hi2
      }
    },
    {
      path: '/reverse',
      name: 'HelloWorld',
      components: {
        default:HelloWorld,
        left:Hi2,
        right:Hi1
      }
    }
  ]

app.vue中代码:
<router-view/>
<router-view name="left" />
<router-view name="right"/>

说明:不写name属性对应就是default。
注意index.js中的是components,而不是单路由单区域的component。

vue-router利用url传参

基本案例:
在app.vue中配置
<router-link to="/Params/192/sahad">Params页面</router-link>|

新建params.vue文件:
<template>
  <div>
      {{msg}}--{{$route.params.id}}--{{$route.params.name}}
  </div>
</template>
<script>
    export default{
        data(){
            return{
                msg:"Hi, Params!"
            }
        }
    }
</script>
说明:此时$route.params.name就是接收传递的参数。

index.js中路由定义:
{
      path: '/Params/:id(\\d+)/:name',
      name: 'Params',
      component: Params,
}
说明:利用:修饰就是传递参数。:id(\\d+)代表正则只能符合数字的,如果传入不是数字,则无效路由。

vue-router 的重定向-redirect

app.vue文件:
<router-link to="/redict">重定向</router-link>|
<router-link to="/goParams/192/sahad">重定向带参数</router-link>|

index.js文件:
{
    path: '/redict',
    redirect:'/'
},
{
    path: '/goParams/:id(\\d+)/:name',
    redirect:'/Params/:id(\\d+)/:name'
}

说明:第二个是带参数的重定向。利用redirect。

alias别名的使用

{
      path: '/Params',
      name: 'Params',
      component: Params,
      alias:'/zengqiang'
}
注意:别名不能使用在/路径上面,是无效的。

路由过度动画

  • fade-enter:进入过渡的开始状态,元素被插入时生效,只应用一帧后立刻删除。
  • fade-enter-active:进入过渡的结束状态,元素被插入时就生效,在过渡过程完成后移除。
  • fade-leave:离开过渡的开始状态,元素被删除时触发,只应用一帧后立刻删除。
  • fade-leave-active:离开过渡的结束状态,元素被删除时生效,离开过渡完成后被删除。

过渡模式

  • in-out:新元素先进入过渡,完成之后当前元素过渡离开,默认值。
  • out-in:当前元素先进行过渡离开,离开完成后新元素过渡进入。
基本案例:
app.vue文件中:
利用transition标签包裹要显示的router-view
<transition name="fade" mode="out-in">
      <router-view/>      
</transition>

对应的css样式:
.fade-enter {
  opacity:0;
}
.fade-leave{
  opacity:1;
}
.fade-enter-active{
  transition:opacity .5s;
}
.fade-leave-active{
  opacity:0;
  transition:opacity .5s;
}

mode的设置和404页面的处理

404基本案例:

index.js中配置path是*的路由,然后新建Error.vue文件
{
        path: '*',
        name: 'Error',
        component:Error
},

路由中的钩子函数

三个参数:

to:路由将要跳转的路径信息,信息是包含在对像里边的。
from:路径跳转前的路径信息,也是一个对象的形式。
next:路由的控制参数,常用的有next(true)和next(false)。

在配置文件(index.js)中的钩子函数,只有一个钩子-beforeEnter,如果我们写在模板(vue文件)中就可以有两个钩子函数可以使用:

beforeRouteEnter:在路由进入前的钩子函数。
beforeRouteLeave:在路由离开前的钩子函数。

配置文件中:
{
      path: '/Params/:id(\\d+)/:name',
      name: 'Params',
      component: Params,
      beforeEnter:(to,from,next)=>{
        next();
      }
}


模板文件中:
export default {
  name: 'params',
  data () {
    return {
      msg: 'params page'
    }
  },
  beforeRouteEnter:(to,from,next)=>{
    console.log("准备进入路由模板");
    next();
  },
  beforeRouteLeave: (to, from, next) => {
    console.log("准备离开路由模板");
    next();
  }
}
</script>
注意:next()不写或者写next(false)相当于路由无效。

编程式导航

export default {
  name: 'app',
  methods:{
    goback(){
      this.$router.go(-1);
    },
    gopre(){
      this.$router.go(1);  
    },
    goHome(){
      this.$router.push('/');
    }
  }
}
说明:this.$router.go(1);是前进,-1就是后退。
push()就是跳转指定路径。

编程式导航补充

// 字符串
this.$router.push('home')
// 对象
this.$router.push({ path: 'home' })
// 命名的路由
this.$router.push({ name: 'user', params: { userId: 123 }})
// 带查询参数,变成 /register?plan=private
this.$router.push({ path: 'register', query: { plan: 'private' }})

获取参数通过路由信息对象route获取
this.$route.params
this.$route.params.userId
举报

相关推荐

0 条评论