Vue学习（路由定义、路由传参方式、子路由）-学习笔记
文章目录
- Vue学习（路由定义、路由传参方式、子路由）-学习笔记
- 路由定义（见下单个文件）
- 路由传参方式
- 二级路由
- 动态面包屑路由组件
- 路由中的props属性（了解）
- 路由拦截
Vue学习（路由定义、路由传参方式、子路由）-学习笔记
路由定义（见下单个文件）
//Vue中main.js文件import Vue from 'vue'import App from './App.vue'import router from './router' //从这里引入路由import store from './store'import './assets/font/iconfont.css' //字体图标import 'bootstrap/dist/css/bootstrap.css'Vue.config.productionTip = falsenew Vue({router, //加载store,render: h => h(App)}).$mount('#app')
路由传参方式
用单个文件来理解：（重要）
<!DOCTYPE html><html><head><title>vue-router</title><script src="vue.js"></script><script src="vue-router.js"></script><style> .active { color: #f60; } </style><script> //$route 对象 $route.params query path name meta //$router 为vueRouter实例 $router.push() // 1、定义组件 var Home = { template: '#home' } var News = { template: '#news' } //2、配置路由 const routes = [ { path: '/home/:id',name: 'home', component: Home}, // params方式传参数，path中需要定义参数 // query方式不需要传参 { path: '/news', component: News}, { path: '/', redirect: '/home'} //重定向 {path: '/*', redirect: '/home'} //重定向 ]; // 3. 创建 router 实例，然后传 `routes` 配置 const router = new VueRouter({ routes,//routes:routes linkActiveClass: 'active' }); window.onload=function(){ // 4. 创建和挂载根实例。 new Vue({ el:'#my', router, //router实例注入到vue实例中 data:{ id:999 } }); } </script></head><template id="home"><div><!-- 获取路由参数的方式 params { {$route.params.id}}--><h3>组件home --{{$route.params.id}}</h3></div></template><template id="news"><div><!-- 获取路由参数的方式 query { {$route.query.id}}--><h3>组件news =={{$route.query.id}}</h3></div></template><body><div id="my"><!-- router-link 跳转 <a href="#/home" class="">home</a> to 属性指定链接--><!-- 路由传参的方式有二种 params:/home/1/a/2 query:/home?id=1&name=2&psd=123--><!-- <router-link to="/home/100">home</router-link> --><!-- <router-link :to="'/home/'+id">home</router-link> --><router-link :to="{name: 'home', params: { id: id}}">home</router-link><!-- <router-link to="/news?id=1234">news</router-link> --><router-link :to="{path: '/news', query: {id: 5678}}">home</router-link><!-- <button @click="goBack()">12</button> --><div><!-- 路由出口 路由匹配到的组件渲染在这里 --><router-view></router-view></div></div></body></html><!-- Vue-详解设置路由导航的两种方法： <router-link :to="..."> 和router.push(...) //声明式 <router-link :to="..."> //编程式 router.push(...) // 声明式的常见方式 <router-link to="/home">home</router-link> // 对象 <router-link :to="{path:'/home'}">home</router-link> // 路由通过名称 <router-link :to="{name: 'homename'}">home</router-link> //直接路由带查询参数query，地址栏变成 /home?id=10 <router-link :to="{path: 'home', query: {id: 10 }}">home</router-link> // 命名路由带查询参数query，地址栏变成/home?id=10 <router-link :to="{name: 'homename', query: {id: 10 }}">home</router-link> //直接路由带路由参数params，params 不生效，如果提供了 path，params 会被忽略 <router-link :to="{path: 'home', params: { id: 10 }}">home</router-link> // 命名路由带路由参数params，地址栏是/home/10 <router-link :to="{name: 'homename', params: { id: 10 }}">home</router-link> 二、router.push(...)方法 // 字符串 router.push('/home') // 对象 router.push({path:'/home'}) // 路由通过名称 router.push({name: 'homename'}) //直接路由带查询参数query，地址栏变成 /home?id=10 router.push({path: 'home', query: {id: 10 }}) // 命名路由带查询参数query，地址栏变成/home?id=10 router.push({name: 'homename', query: {id: 10 }}) //直接路由带路由参数params，params 不生效，如果提供了 path，params 会被忽略 router.push({path:'homename', params:{ id: 10 }}) // 命名路由带路由参数params，地址栏是/home/10 router.push({name:'homename', params:{ id: 10 }}) -->
二级路由
可见代码：https://gitee.com/monkeyhlj/vue-learning
动态面包屑路由组件
路由中的props属性（了解）
props里面可写函数，比较灵活。
路由拦截
常应用于登录–判断用户是否登录过—>本地存储——->首页
水深无声
小鱼儿
迷南。
àì夳堔傛蜴生んèń
骑猪看日落
还没有评论，来说两句吧...