搭建工程
npm install vue-cli --save-dev
vue init webpack packageName(pizza-app)
cd pizza-app
npm install
num run dev
src下创建目录components和组件
在index.html中引入bootstrap4 css样式
组件嵌套
子组件Header.vue中配置名字：
<script>
export default {
name:'app-Header'
};
</script>
父组件App.vue中引用Header.vue
<!-- 引入组件 -->
import Header from './components/Header.vue'
<!-- 实例化组件 -->
export default {
name: 'app',
components:{
"app-Header":Header
},
}
<!-- 使用组件 -->
<div class="container">
<app-Header></app-Header>
</div>
路由跳转
npm install vue-router --save
在main.js 中引用路由和组件
import VueRouter from 'vue-router'
import Home from './components/Home.vue'
在main.js 中配置路由
Vue.use(VueRouter)
const routes=[
{path:'/',component:Home},
]
const router = new VueRouter({
routes,
<!-- 去掉# -->
mode:'history'
})
new Vue({
el: '#app',
router,
render: h => h(App)
})
使用路由
在App.vue中固定位置放置路由跳转内容。
<div class="container">
<router-view></router-view>
</div>
在Header.vue中使用路由标签。
<!-- tag自定义包裹路由的标签名 -->
<router-link tag="div" to="/" class="nav-link">主页</router-link>
动态使用路由
在Header.vue中设置属性
data(){
return{
homeLink:'/'
}
}
在标签中使用属性
<router-link :to="homeLink" class="nav-link">主页</router-link>
data(){
return{
homeLink:'/'
}
}
非指定路由设置默认跳转
除了配置过的路由之外，其他路由默认跳转至redirect属性
{path:'*',redirect:'/'}
路由name属性及跳转
在main.js配置路由name属性
{path:'/',name:"homeLink",component:Home},
在标签中引用name属性
<router-link :to="{name:'homeLink'}" class="nav-link">主页
路由跳转到上一个路由
this.$router.go(-1);
跳转到指定路由
this.$router.replace('/menu')
跳转到指定路由的名字
this.$router.replace({name:'menuLink'})
this.$router.push({name:'menuLink'})
路由嵌套
多级路由：在上级路由下添加childre属性
{path:'/about',name:"aboutLink",component:About,children:[
{path:'/about/contact',name:'contactLink',component:Contact},]
全局守卫
<!-- 如果页面没有在登录或者注册页面，next跳转到登录页面。 -->
router.beforeEach((to, from, next) => {
if (to.path == '/login' || to.path == '/register') { next(); }
else {
alert("请先登录");
next('/login')
}
})
路由独享-组件内守卫
main.js
{ path: '/admin', name: "adminLink", component: Admin,beforeEnter: (to, from, next) => {
alert("非登录状态无法进入此页面");
next();
<!-- next()进入页面 -->
<!-- next(false) 不会进入页面 -->
} },
组件内配置
<script>
export default {
data(){
return{
name:'herry'
}
},
//进入组件之前
beforeRouteEnter:(to,from,next)=>{
// alert("hello "+this.name);
//hello undefined
// next();进入页面
<!-- 异步，已经获取到了data -->
next(vm=>{
alert("hello "+vm.name)
//hello herry
})
}
//离开组件之前
beforeRouteLeave (to, from, next) {
if(confirm("确定离开吗？")==true){
next();
//点击确认，离开页面
}
else{
next(false);
//点击取消，留在当前页面
}
}
}
</script>
路由的代码抽离
新建routers.js文件。
routes 部分剪贴到routers.js并导出。
在main.js 导入并引用。
router-view的复用
在需要复用的地方(App.vue)分配位置,并设置name属性
<router-view name="orderingGuide"></router-view>
在routers.js中对应路由中(homeLink)进行配置
{ path: '/', name: "homeLink", components:{
//默认路由
default:Home,
'orderingGuide':OrderingGuide,
'delivery':Delivery,
'history':History
} },
路由控制滚动行为
在main.js中添加scrollBehavior方法
const router = new VueRouter({
routes,
mode: 'history',
scrollBehavior(to,from,savedPosition){
//return{x:0,y:100} 指定坐标
//return{selector:'.btn'} 指定class
if(savedPosition){
return savedPosition //浏览器后退按钮，回退到上一次浏览页面的位置
}
else{
return{x:0,y:0}
}
}
})
