码迷,mamicode.com
首页 > 其他好文 > 详细

vue 基础的一些字眼及路由

时间:2018-03-08 18:10:34      阅读:144      评论:0      收藏:0      [点我收藏+]

标签:syn   routes   click   name   引入   文件   路由   guid   gui   

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

摘自 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 前面的名字。 

 

 

 

 

 

 

 

 

 

 

vue 基础的一些字眼及路由

标签:syn   routes   click   name   引入   文件   路由   guid   gui   

原文地址:https://www.cnblogs.com/caihua0405/p/8529884.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!