Vue学习（路由定义、路由传参方式、子路由）-学习笔记

小鱼儿 2023-01-23 10:57 122阅读 0赞

### 文章目录 ###

*   *  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 = false
    
    new 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>
    		
    		<h3>组件home --{
       {$route.params.id}}</h3>
    	</div>
    </template>
    <template id="news">
    	<div>
    		
    		<h3>组件news =={
       {$route.query.id}}</h3>
    	</div>
    </template>
    
    <body>
    	<div id="my">
    		
    		
    		
    		
    		<router-link :to="{name: 'home', params: { id: id}}">home</router-link>
    		
    		
    		<router-link :to="{path: '/news', query: {id: 5678}}">home</router-link>
    		
    		<div>
    			
    			<router-view></router-view>
    		</div>
    	</div>
    </body>
    </html>

### 二级路由 ###

可见代码：https://gitee.com/monkeyhlj/vue-learning

### 动态面包屑路由组件 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 1]

### 路由中的props属性（了解） ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 2]  
**props里面可写函数，比较灵活。**  
![在这里插入图片描述][20210714203745270.png]

### 路由拦截 ###

常应用于登录–判断用户是否登录过—>本地存储----->首页  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 3]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70]: /images/20221004/c6a77b8f5f874d7482b8790df6ff0962.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 1]: /images/20221004/e9d2b966251c4e6aa3f09e03aa8bb859.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 2]: /images/20221004/3ee429e6ad5442d49071b3df77f071aa.png
[20210714203745270.png]: /images/20221004/3c26932c97534c78a84f91822df1cebf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 3]: /images/20221004/615bd66dfab14737b42bdac067022198.png