怎么做网站维护,网页制作工具有什么,免费室内设计网站都有哪些,网站建设一站式路由简介
SPA单页面应用。导航区和展示区
单页Web应用整个应用只有一个完整的页面点击页面中的导航连接不会刷新页面#xff0c;只会做页面的局部更新数据需要通过ajax请求获取
路由#xff1a;路由就是一组映射关系#xff0c;服务器接收到请求时#xff0c;根据请求路…路由简介
SPA单页面应用。导航区和展示区
单页Web应用整个应用只有一个完整的页面点击页面中的导航连接不会刷新页面只会做页面的局部更新数据需要通过ajax请求获取
路由路由就是一组映射关系服务器接收到请求时根据请求路径找到匹配的函数处理请求返回响应数据
基本路由
main.js
import Vue from vue
import App from ./App.vue//1.下载vue-router模块到当前工程版本3.6.5
//2.引入
import VueRouter from vue-routerimport ViewA from ./views/ViewA.vue
import ViewAA from ./views/ViewAA.vue
import ViewB from ./views/ViewB.vue
import ViewBB from ./views/ViewBB.vueVue.config.productionTip false
//3.安装注册
Vue.use(VueRouter)
//4.创建路由对象
const routernew VueRouter({routes:[{path: /viewA, component :ViewA,children:[{path:/viewAA,component:ViewAA}]},{path:/viewB,component:ViewB,children:[{path:/viewBB,component: ViewBB}]}]
})new Vue({render: h h(App),//5.注册将路由对象引入new Vue实例中建立链接router
}).$mount(#app)views/ViewA.vue
templatedivh1ViewA页面/h1a href#/viewAAViewAA页面/arouter-view/router-view/div
/templatescript
export default {name:ViewPageA
}
/scriptstyle/style
views/ViewAA.vue
templatedivh1ViewAA页面/h1/div
/templatescript
export default {name:ViewPageAA
}
/scriptstyle/style
views/ViewB.vue
templatedivh1ViewB页面/h1a href#/viewBBViewBB页面/arouter-view/router-view/div
/templatescript
export default {name:ViewPageB
}
/scriptstyle/style
views/ViewBB.vue
templatedivh1ViewBB页面/h1/div
/templatescript
export default {name:ViewPageBB
}
/scriptstyle/style
App.vue
templatedivdiva href#/viewAViewA页面/aa href#/viewBViewB页面/a/divrouter-view/router-view/div
/templatescript
export default {}
/scriptstyle/style
路由封装
1.将路由封装到一个js文件
2.模块导入改成绝对路径
注ViewA.vue ViewAA.vue ViewB.vue ViewBB.vue App.vue与上面一样
封装 router/index.js
import Vue from vue
import VueRouter from vue-router
import ViewA from /views/ViewA.vue
import ViewAA from /views/ViewAA.vue
import ViewB from /views/ViewB.vue
import ViewBB from /views/ViewBB.vue
Vue.use(VueRouter)
const router new VueRouter({routes: [{path: /viewA,component: ViewA,children:[{path: /viewAA,component: ViewAA}]},{path: /viewB,component: ViewB,children:[{path: /viewBB,component: ViewBB}]}]
})
export default router
main.js
import Vue from vue
import App from ./App.vue
import router from /router/indexconsole.log(router);Vue.config.productionTip falsenew Vue({router,render: h h(App)
}).$mount(#app)router-link控件
router-link控件用于代替a标签里面有两个高亮类名 router-link-active 模糊匹配用的多 router-link-exact-active 精准匹配 也可以自定义高亮类名
1.router-link-active
模糊匹配用的多
to“/my” 可以匹配 /my /my/a /my/b …
只要是以/my开头的路径 都可以和 to/my匹配到
2.router-link-exact-active
精确匹配
to“/my” 仅可以匹配 /my
const router new VueRouter(
{
routes:
[ { path: /my, component: My },{ path: /find, component: Find }
], // 模糊匹配,重新定义类名linkActiveClass: active, // 精确匹配,重新定义类名linkExactActiveClass: exact-active
})
声明式导航-跳转传参 注遇到页面可能需要参数可能不需要参数path写法- path:/search/:words?
编程式导航
this.$router.push(路径?参数名1参数值)
获取值写法 this.$route.query.参数名1 this.$router.push({ path:/路径, params:{ 参数名1参数值1, 参数名2参数值2 } })
获取值写法
this.$route.params.参数名1
this.$route.params.参数名2
路由设置 组件缓存keep-alive
keep-alive用于对组件进行缓存不在此进行重新加载 keep-alive的三个属性
1.include:组件名数组只有匹配的组件会被缓存
2.exclude组件名数组任何匹配的组件都不会被缓存
3.最多可以缓存多少组件实例
4.使用会触发两个生命周期函数 activated当组件被激活使用的时候触发-进入页面触发 deactivated当组件不被使用的时候触发-离开页面触发注activated、deactivated两个方法在缓存组件创建
views/ViewA.vue
templatedivh1ViewA页面/h1/div
/templatescript
export default {name:ViewPageA,created(){console.log(创建了A);},activated(){console.log(activated);},deactivated(){console.log(deactivated);}
}
/scriptstyle/style
views/ViewB.vue
templatedivh1ViewB页面/h1/div
/templatescript
export default {name: ViewPageB,created() {console.log(创建了B);}
}
/scriptstyle/style
App.vue
templatedivdiva href#/viewAViewA页面/aa href#/viewBViewB页面/a/divkeep-alive :include[ViewPageA]router-view/router-view/keep-alive/div
/templatescript
export default {data() {return {checked: true}}
}
/scriptstyle/style
