vue续集2

2025-02-27 技术教程

1.前端路由1.1为什么做单页面应用

（1）传统的开发方式 url改变后，立马发送请求，响应整个页面，有可能资源过多，传统开发会让前端的页面出现 “白屏” 用户体验不好（2）SPA 单页面应用：锚点值的改变后，不会立刻发送请求，而是在某个合适的时机，发送ajax请求，局部改变页面中的数据,页面不立刻跳转用户体验好1.2前端路由的原理

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title></head><body>  <a href="#/login">登录页面</a> <a href="#/register">注册页面</a> <div id="app"> </div> <script type="text/javascript"> // onhashchange 事件 url上的锚点数据（#/xxx改变） var oDiv = document.getElementById('app'); window.onhashchange = function(){ console.log(location.hash); // 根据不同的锚点值，对页面不同的切换。 switch (location.hash) { case '#/login': oDiv.innerHTML = '<h3>登录页面</h3>'; break; case '#/register': oDiv.innerHTML = '<h3>注册页面</h3>'; break; default: // statements_def break; } } </script></body></html>

1.3vue-router的基本使用

npm init --yesnpm install vue-router --save

1.4vue-router集成

它是vue中核心插件1. 下载vue-router npm init --yes npm install vue-router --save - 引入vue-router的模块默认会抛出一个VueRouter对象另外还有两个全局的组件router-link 和router-view2. Vue.use(VueRouter)3. 创建路由对象

1.5命名路由

给当前的配置路由信息对象设置name:'login'属性:to = "{name:'login'}"

1.6路由范式----路由参数之params,query

(1)xxxx.html#/user/1 配置路由对象中 { path:'/user/:id', component:User } <router-link :to = "{name:'user',params:{id:1}}"></router-link> (2)xxxx.html#/user?userId = 1 { path:'/user' } <router-link :to = "{name:'user',query:{id:1}}"></router-link> 在组件内部通过this.$route 获取路由信息对象

1.7编程式导航

1.8嵌套路由

一个router-view 嵌套另外一个router-view

1.9动态路由匹配

// 共同的子组件 var ComDesc = { data() { return { msg: '' } }, template: ` <div> 我是{{msg}} </div> `, created() { // alert(1); this.msg = 'andorid'; }, watch: {// 提醒一下，当使用路由参数时，例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用。//因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。 '$route' (to, from) { // 对路由变化作出响应... console.log("to------------------", to); console.log("from------------------", from); this.msg = to.params.id; } } }

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title></head><body> <div id="app"></div> <script type="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script>  <script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.js"></script>  <script type="text/javascript"> // 嵌套路由： // 需求：进入首页之后点击音乐 /home/music 电影 /home/movie Vue.use(VueRouter); var Timeline = { template: ` <div> <router-link :to = "{name:'comDesc',params:{id:'android'}}">Android</router-link> <router-link :to = "{name:'comDesc',params:{id:'frontend'}}">前端</router-link> <router-view></router-view> </div> ` }; var Pins = { template: ` <div> 我是沸点 </div> ` }; // 共同的子组件 var ComDesc = { data() { return { msg: '' } }, template: ` <div> 我是{{msg}} </div> `, created() { // alert(1); this.msg = 'andorid'; }, watch: {// 提醒一下，当使用路由参数时，例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用。//因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。 '$route' (to, from) { // 对路由变化作出响应... console.log("to------------------", to); console.log("from------------------", from); this.msg = to.params.id; } } } // 3.创建一个路由对象 var router = new VueRouter({ // 配置路由对象 routes: [{ // 动态的路由参数以冒号开头 path: '/timeline', component: Timeline, children: [{ path: "", component: ComDesc }, { path: '/timelin/:id', name: 'comDesc', component: ComDesc } ] }, { // 动态的路由参数以冒号开头 path: '/pins', name: 'pins', component: Pins, } ] }); var App = { template: ` <div> <router-link to = "/timeline">首页</router-link> <router-link to = "/pins">沸点</router-link>  <router-view></router-view> </div> ` }; new Vue({ el: '#app', components: { App }, router, template: `<App />` }); </script></body></html>

1.10keep-alive

<keep-alive> <router-view></router-view></keep-alive>

1.11路由meta实现权限控制

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title></head><body> <div id="app"></div> <script type="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script>  <script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.js"></script>  <script type="text/javascript"> // 嵌套路由： // 需求：进入首页之后点击音乐 /home/music 电影 /home/movie Vue.use(VueRouter); // 导航栏上有首页智能题库登录退出四个按钮 // 用户访问首页时看到的是首页的内容 // 1.当用户访问智能题库时，此时我们检测用户是否有权限访问该智能题库的内容， // 如果没有检测用户是否登录过，如果没有，则跳转登录页面，登录完成之后。 // 在localStroage中通存储该用户的用户名和密码，并且立刻跳转到智能题库页面 // 2.当用户点击黜退，该用户直接删除 var Home = { template: ` <div> 我是首页 </div> ` }; var Questionbank = { template: ` <div> 我是题库 </div> ` }; // 登录组件 var Login = { data(){ return { name:'', pwd:'' } }, template:` <div> <input type="text" v-model = 'name' /> <input type="text" v-model = 'pwd' /> <input type="button" value = '登录' @click = 'loginHandler'/> </div> `, methods:{ loginHandler(){ alert(1); // 要登录了 // 存储用户名会被密码保存到 localStorage 然后跳转相应的路由（智能题库） localStorage.setItem('user', {name:this.name,pwd:this.pwd}); // 编程式导航 this.$router.push({name:'questionbank'}); } } }; // 3.创建一个路由对象 var router = new VueRouter({ // 配置路由对象 routes: [{ // 动态的路由参数以冒号开头 path: '/home', component: Home }, { // 动态的路由参数以冒号开头 path: '/questionbank', name: 'questionbank', component: Questionbank, // 给未来的路由做权限控制 meta:{ // 表明访问该组件时需要登录 auth: true } }, { path:'/login', component:Login } ] }); // 全局的导航守卫 router.beforeEach(function(to,from,next){ console.log(to.meta.auth); console.log(from); // 如果不调用next 那么页面会卡主 if(to.meta.auth){ // 用户点击了智能题库的导航该用户未登录，需要登录判断 if (localStorage.getItem('user')) { // 不为空放行 next() }else{ // 为空进入登录页面 next({path:'/login'}); } }else{ // 直接放行 next(); } }); var App = { template: ` <div> <router-link to = "/home">首页</router-link> <router-link to = "/questionbank">智能题库</router-link> <router-link to = '/login'>登录</router-link> <a href="javascript:void(0)" @click = 'clear'>退出</a>  <keep-alive> <router-view></router-view> </keep-alive> </div> `, methods:{ clear(){ // 退出 localStorage.removeItem('user'); this.$router.push('/login'); } } }; new Vue({ el: '#app', components: { App }, router, template: `<App />` }); </script></body></html>