每个框架都有一些自己的写法和一些字眼
摘自 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 前面的名字。