vue+elementui

创建vue+elementui 项目之前开发环境：

node.js 	#查看我博客node.js 安装
npm 		#安装npm install -g cnpm --registry=https://registry.npm.taobao.org`
vue-cli		#安装cnpm install vue-cli -g

创建vue-element-ui工程，

我们需要安装 vue-router 、element-ui 、sass-loader 、node-sass

#初始化vue项目
vue init webpack vue-element-ui(项目名)	
#进入工作目录		
cd myvue
#Vue-router安装
npm install vue-router  --save-dev
# npm 安装 推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。
npm i element-ui -S
#安装依赖			
npm install	
#安装SASS加载器
cnpm install sass-loader node-sass --save-dev 	#npm 这里老是报错，用淘宝就ok
#运行项目		
npm run dev      

路由嵌套：

VueRouter 的参数中使用 children 配置

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User,
      children: [
        {
          // 当 /user/:id/profile 匹配成功，
          // UserProfile 会被渲染在 User 的 <router-view> 中
          path: 'profile',
          component: UserProfile
        },
        {
          // 当 /user/:id/posts 匹配成功
          // UserPosts 会被渲染在 User 的 <router-view> 中
          path: 'posts',
          component: UserPosts
        }
      ]
    }
  ]
})

编程式的导航

声明式	编程式
<router-link :to="...">	router.push(...)

命名路由(参数传递)

命名路由，可以给 router-link 的 to 属性传一个对象：

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

这跟代码调用 router.push() 是一回事：

router.push({ name: 'user', params: { userId: 123 }})

这两种方式都会把路由导航到 /user/123 路径。
有时候，通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候。你可以在创建 Router 实例的时候，在 routes 配置中给某个路由设置名称。

const router = new VueRouter({
  routes: [
    {
      path: '/user/:userId',
      name: 'user',
      component: User
    }
  ]
})

路由组件传参：

降低耦合：

布尔模式

如果 props 被设置为 true，route.params 将会被设置为组件属性。

重定向：

重定向也是通过 routes 配置来完成，下面例子是从 /a 重定向到 /b：

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: '/b' }
  ]
})

别名

/a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样。

const router = new VueRouter({
  routes: [
    { path: '/a', component: A, alias: '/b' }
  ]
})

路由模式

hash 默认:当 URL 改变时，页面不会重新加载。
history 模式 在router 实例中添加mode:history:URL 跳转而无须重新加载页面

警告