vuevue-router基本使用
Vue的全家桶（kfc）vue+vue-router+vuex
vue+vue-router 主要用来做SPA（Single Page Application）单页面应用 vue-router是vue的核心插件 为什么要使用单页面应用？ 传统的路由跳转，如果后端资源过多，会导致页面出现白屏现象，让前端来做路由，在某个声命周期的钩子函数中发送ajax（要数据），渲染驱动（DOM） （为了用户体验）
vue-router下载
<script src="vue.min.js"></script>
<script src="vue-router.js"></script> 依赖于vue的
可直接复制cdn代码
vue-router是vue的核心插件,vue+vue-router 主要来做 SPA（Single Page Application） 单页面应用
为什么要使用单页面应用？
传统的路由跳转，如果后端资源过多，会导致页面出现`白屏现象`，让前端来做路由，在某个生命周期的钩子函数中发送ajax，数据驱动。为了用户体验
官网
https://router.vuejs.org/zh/installation.html
安装
如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能：
import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) 如果使用全局的 script 标签，则无须如此 (手动安装)。
直接下载 / CDN
https://unpkg.com/vue-router/dist/vue-router.js
项目中下载指定版本
cnpm i vue-router@2 -S
路由图示查找顺序
1.定义路由组件 示例eg：https://www.cnblogs.com/ouyangjintao/p/14891487.html
const Home = { data() { return {} }, template: `<div>我是首页</div>` }
2.创建router实例,配置路由规则
const router = new VueRouter({ //定义路由规则 mode:'history',//少去#号 routes: [ //注意是 routes不是router { path:'/', redirect:'/home' }, { path: '/home', component: Home //记住查询是没有引号的 }, { path: '/course', component: Course } ] })
3.创建Vue实例,并挂载路由对象
new Vue({ el: '#app', //挂载 路由对象 router, data() { return {} }, template: `<App />`, components: { App //局部挂子是有s的 全局没有 } })
4.template中渲染router-link和router-view
let App = { data() { return {} }, // router-link和router-view 是vue-router 提供的两个全局组件 //router-view 是路由组件的出口 //router-link默认会被渲染成a标签，to属性默认被渲染成href template: ` <div> <div class="header"> <router-link to = '/home'>首页</router-link> <router-link to = '/course'>免费课程</router-link> </div> <router-view></router-view> </div> ` }
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div id="app"> </div> <script src="vue.js"></script> <script src="vue-router.js"></script> <script> //如果以后是模块化编程，Vue.proptotype.$VueRouter = VueRouter // Vue.use(VueRouter) const Home = { data() { return {} }, template: `<div>我是首页</div>` } const Course = { data() { return {} }, template: `<div>我是免费课程</div>` } //创建路由 const router = new VueRouter({ //定义路由规则 mode:'history', routes: [ { path:'/', redirect:'/home' }, { path: '/home', component: Home }, { path: '/course', component: Course } ] }) let App = { data() { return {} }, // router-link和router-view 是vue-router 提供的两个全局组件 //router-view 是路由组件的出口 template: ` <div> <div class="header"> <router-link to = '/home'>首页</router-link> <router-link to = '/course'>免费课程</router-link> </div> <router-view></router-view> </div> ` } new Vue({ el: '#app', //挂载 路由对象 router, data() { return {} }, template: `<App />`, components: { App } }) </script> </body> </html>
命名路由
有时候，通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候。你可以在创建 Router 实例的时候，在 routes 配置中给某个路由设置名称。
要链接到一个命名路由，可以给 router-link 的 to 属性传一个对象：
注意需要绑定 :to
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div id="app"> </div> <script src="vue.js"></script> <script src="vue-router.js"></script> <script> const Home = { data() { return {} }, template: `<div>我是首页</div>` } const Course = { data() { return { categoryList:[] } }, template: `<div> <span v-for = '(item,index) in categoryList'>{{item.name}}</span> </div>`, methods:{ getCategroyList(){ } }, created(){ //ajax 发送请求 数据获取 this.getCategroyList(); } } //创建路由 const router = new VueRouter({ //定义路由规则 routes: [ { path:'/', redirect:'/home' }, { path: '/home', name:'Home', component: Home }, { path: '/course', name:'Course', component: Course } ] }) let App = { data() { return {} }, // router-link和router-view 是vue-router 提供的两个全局组件 //router-view 是路由组件的出口 template: ` <div> <div class="header"> <router-link :to = '{name:"Home"}'>首页</router-link> <router-link :to = '{name:"Course"}'>免费课程</router-link> </div> <router-view></router-view> </div> ` } new Vue({ el: '#app', //挂载 路由对象 router, data() { return {} }, template: `<App />`, components: { App } }) </script> </body> </html>
动态路由匹配
$route 路由信息对象
提醒一下，当使用路由参数时，例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。
这里我们使用watch (监测变化) $route 对象：
$route(to,from) 这两个参数,to 代表到哪里去 , from 代表你从哪里来
1.动态绑定参数
2.router-link绑定这个对象
3.watch监听路由变化
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div id="app"> </div> <script src="vue.js"></script> <script src="vue-router.js"></script> <script> //如果以后是模块化编程，Vue.proptotype.$VueRouter = VueRouter // Vue.use(VueRouter) //路由范式： //http://127.0.0.1:8080/index/user //http://127.0.0.1:8080/user/1 params //http://127.0.0.1:8080/user/2 //http://127.0.0.1:8080/user?user_id =1 query const User = { data() { return { user_id:null } }, template: `<div>我是用户{{ user_id}}</div>`, created() { console.log(this.$route); //路由信息对象 // 提醒一下，当使用路由参数时，例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。 }, watch: { '$route'(to, from) { // 对路由变化作出响应... console.log(to.params.id); console.log(from); this.user_id = to.params.id; //发送ajax } } } //创建路由 const router = new VueRouter({ //定义路由规则 routes: [ { path: '/user/:id', name: 'User', component: User } ] }) let App = { data() { return {} }, // router-link和router-view 是vue-router 提供的两个全局组件 //router-view 是路由组件的出口 template: ` <div> <div class="header"> <router-link :to = '{name:"User",params:{id:1}}'>用户1</router-link> <router-link :to = '{name:"User",params:{id:2}}'>用户2</router-link> </div> <router-view></router-view> </div> ` } new Vue({ el: '#app', //挂载 路由对象 router, data() { return {} }, template: `<App />`, components: { App } }) </script> </body> </html>
query
编程式导航
$router 路由对象 VueRouter
标签绑定事件后,使用$router.push进行跳转
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script src="../vue.js"></script> <script src="../vue-router.js"></script> <div class="app"> </div> <div></div> <script> const Home = { data(){ return{} }, template: `<div>我是首页</div> ` }; const User = { data(){ return{ user_id:null } }, template: `<div>我是用户{{ user_id }}号 <button @click="clickHankler">跳转首页</button> </div> `, methods:{ //编程式导航 clickHankler (){ this.$router.push({ name:'Home' }) } }, watch:{ '$route'(to,from) { // console.log(to); console.log(from); this.user_id = to.params.id } } }; const router = new VueRouter({ mode:"history", routes:[ { path:'/user/:id', component: User, name:'user' }, { path:'/home', component:Home, name:'Home' } ], }); let App = { data(){ return{} }, template:` <div> <router-link :to="{name:'user',params:{id:1}}">用户1</router-link> <router-link :to="{name:'user',params:{id:2}}">用户2</router-link> <router-view></router-view> </div> ` }; new Vue({ el:'.app', router, data(){ return{ } }, template:`<App/>`, components:{ App } }) </script> </body> </html>
其他的方式（使用方式同push）
// 开发中可以先进行权限，登录之类的判断，然后再进行跳转 // this.$router.back(); // 返回上一页，本质上就是 location.back() // this.$router.go(-1); // 返回上一页，本质上就是 location.go() // this.$router.forward(); // 跳转到下一页，本质上就是 location.forward() this.$router.push("/user"); // 跳转到站内的制定地址页面中，本质上就是 location.href // 注意,this.$router.push 不能跳转到其他网站。如果真的要跳转外站，则使用location.href="站外地址，记得加上http://协议"
浙公网安备 33010602011771号