vue 基础的一些字眼及路由

Posted 2020-10-26 有钱花

每个框架都有一些自己的写法和一些字眼

摘自 vue 官网

v-bind 缩写

<!-- 完整语法 -->
<a v-bind:href="url">...</a>

<!-- 缩写 -->
<a :href="url">...</a>

 

　　

 

v-on 缩写

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>

<!-- 缩写 -->
<a @click="doSomething">...</a>

 

使用路由，可以是页面无刷新跳转。并且地址栏地址也是被修改掉的。

这个是路由文件全部代码

import Vue from ‘vue‘
import Router from ‘vue-router‘
import Index from ‘../pages/index‘
import One from ‘../pages/one‘
import Two from ‘../pages/two‘
import Three from ‘../pages/three‘
import Four from ‘../pages/four‘
import UserCenter from ‘../pages/userCenter‘
import UserInfo from ‘../pages/UserInfo‘

Vue.use(Router)

export default new Router({
    routes: [{
	  path: ‘/‘, 		//这里路径就是这样
	  redirect: ‘index‘  //设置默认首页
    },{
      path: ‘/index‘,
      name: ‘index‘,
      component: Index
    },
    {
      path: ‘/one‘,
      name: ‘one‘,
      component: One
    },
    {
      path: ‘/two‘,
      name: ‘two‘,
      component: Two
    },
    {
      path: ‘/three‘,
      name: ‘three‘,
      component: Three
    },
    {
      path: ‘/four‘,
      name: ‘four‘,
      component: Four
    },
    {
      path: ‘/userCenter‘,
      name: ‘userCenter‘,
      component: UserCenter,
      children: [
        {
          path: ‘userInfo‘,
          name: ‘userInfo‘,
          component: UserInfo
        }
      ]
    }]
})

　　上面  import 是引入文件,from 后面是路径相对于这个路由文件的路径，from前面是一个名字，用于这个路由文件用调用

Vue.use(Router)是启用路由。没有这个代码，这个路由是没有用的

export default new Router   默认new一个新的路由， routes    这个属性下面是 path   和component 这两个属性是一定要的，

一个路径，另一个是 组件名字。不填写属性值是不会报错的，但是会跳转不到页面去。会显示一个空的页面，，，组件的名字就是

上面from 前面的名字。