Vue-cli和Vue-router

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

cnpm install vue-router --save-dev
如果用脚手架一般都是安装过，就不需要重复安装了。

结构补充

import HelloWorld from '@/components/HelloWorld',中@自动映射到src目录下.
Vue.use(Router):全局使用vue-router

路由步骤：
一、在components目录下面新建模板Hi.vue


template内部要有个父标签，这是vue2.0的规范
其中，data是个匿名函数，是es6的简化写法，等价于:
data:function(){}.

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

三、针对App.vue的解释
是显示路由组件内容的，
Hi页面
类似于a标签，to类似与herf。

子路由

路由的二级路由，子路由内部可以嵌套子路由

一、新建子路由文件Hi1.vue和Hi2.vue
如下：



二、在父路由的vue文件中添加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传递参数，不常用)

传递的是name属性的值，直接在对应的模板vue文件中利用route.name使用即可，例如：

{{$route.name}}

，注意是route不是router。

方式二(通过 标签中的to传参)

修改app.vue中的，例如：Hi2页面，name要和index.js中路由的name要一致，所以，这是固定写法，但是params对象中的内容是可变的。然后在其他模板文件中使用

{{msg}}--{{$route.params.username}}

。说明：route.params对应就是上面的params对象。

对比正常路由和参数路由写法的区别，Hi1页面|
Hi2页面|

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

命名路由

动态路由规则

const router = new VueRouter({
  routes: [
    {
      path: '/user/:userId',
      name: 'user',
      component: User
    }
  ]
})
User
等效于：
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中代码：




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

vue-router利用url传参

基本案例：
在app.vue中配置
Params页面|

新建params.vue文件：


说明：此时$route.params.name就是接收传递的参数。

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

vue-router 的重定向-redirect

app.vue文件：
重定向|
重定向带参数|

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

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

alias别名的使用

别名和重定向的区别就是：重定向的url最后是变化的，而别名是真实的路径，例如/zengqiang的别名，点击之后就是/zengqiang。

{
      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

            


对应的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页面的处理

在index.js文件中，在export default new Router中设置mode属性，来控制url的形式， mode:'history', mode:'hash'（默认）。

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();
  }
}

注意：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