创建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 跳转而无须重新加载页面