Vue Router使用规则_vue-router 规则

router个人认为是vue中最让人恼火的，我在这卡了两周时间，嵌套路由，html结构，相互纠结傻傻分不开，转不过来！
如果你也卡住了，散散步，放松下心情，听听歌，然后干掉它！

一、VueRouter注册使用

1、创建路由模块 router/index.js

//1、导入对象
import Vue from 'vue' 
import VueRouter from 'vue-router'

//2、注册对象
Vue.user（VueRouter）

//3、定义映射规则
const routes=[

]
//4、创建路有对象
const router=new VueRouter({
routes
})

//5、导出路由对象
export defaule router

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

2、挂载路由模块main.js

import Vue from 'vue' 
import router from './router/index.js'
//  import router from './router'  当文件夹只有index文件是可省略简写 
....
.....
...
new VUe({
//注册全局实例
router,
store,
render:h=>(App),
}).$mount('#app')

1
2
3
4
5
6
7
8
9
10
11
12
13

二、router模式

配置方式：通过路由模块下的js文件配置 src/router/index.js

hash模式：浏览器url中带有 ‘#’ 链接地址，称为hash 链接，描述了当前页面为参照链接的相对连接路径！

const router=new VueRouter({
routes,
mode:'hash' //（vue默认链接模式）
})
1
2
3
4

使用场景：方便需要在项目交付打包测试时，本地测试使用！
该配置模式下，打包的项目可在本地运行测试，

扩展

---

添加项目打包配置文件：跟路径/Vue.config.js

module.exports={
//配置打包公共路径
publicPath:'/'
}
1
2
3
4

执行项目打包：默认情况Vue采用webpack进行项目打包

npm run build
1

打包后会在项目中生成dist/目录，将结果文件导入该目录中使用（可本地浏览测试）

---

history模式：常规模式，链接地址不带 ‘#’ 符号

const router=new VueRouter({
routes,
mode:'history'， //（vue常规链接模式）
base:'跟路径名/dist/' //与pulicPath一致
})
1
2
3
4
5

使用场景：history模式用于打包交付文件，提供部署给生产环境部署到web服务器（如nginx/tomcat
/apache…等）使用，打包的文件本地无法操作，需要配合后端web服务器部署才能正常使用。
打包的结果文件，部署成功后可在浏览器中，通过路径中访问，不需要 "#"符号

三、自定义导航高亮

const router=new VueRouter({
routes,
mode:'hash'，
linkActiveClass:'active',//自定义高亮名称   .active css样式中可以直接使用
})
1
2
3
4
5

四、路由重定向

释义：用户访问主页 /index，但是因为你没等登录，强制返回登录页面，
将url地址重定向到 /login，url显示变化

const routes=[
{
path:'/index',
redirect:'/login' //重定向
conponent:'/login' //访问组件
}
]
1
2
3
4
5
6
7

五、路由别名

释义：用户访问主页 ‘/a’ ,但是这个页面由于一些原因，我们不想让他访问这个页面（页面没有这个组件或者其他原因），
所以我们让他访问别的组件 ‘/b’，但是url地址依然显示的 ’/a‘ ,与重定向区别在此处，重定向url地址改变，
路由别名方式，url地址依然是访问地址 ’/about‘。

const router=[
{
path:'/about',
alias：'/b',
conponent:'b'
},
{
path:'/b',
alias：'b',
conponent:'b'
}
]
1
2
3
4
5
6
7
8
9
10
11
12

六、命名视图

VueRouter中的默认视图为,用于匹配一个路由组件，但是页面中需要匹配展示多个导航组件时，就需要通过命名视图来匹配。

//命名视图：名称为yourname的导航视图
<router-view name='yourname'></router-view>
//默认视图：名称为defoult
<router-view></router-view>
1
2
3
4

命名视图匹配规则

{
path:'/',
components:{  //注意components单词多了‘s’
  yourname:youerVue,
  defoult:home
}
}
1
2
3
4
5
6
7

七、路由传参

1、路由传参

①动态路由传参

//地址：@/components/page.vue
//组件1
<h1>传递参数01</h1>
<router-link to='/page/01'></router-link>
<router-view></router-view>
// 或动态参数num  注意：num需要定义
// <router-link :to="/page+'/'+num"></router-link>
1
2
3
4
5
6
7

//地址：@/router/index.js
//匹配规则 定义接收参数变量 id
{
path:'/page/:id',
component:page01
}
1
2
3
4
5
6

```javascript
//地址：@/components/page01.vue
//组件2
<h1>接收参数为：{{ $route.params.id }}</h1>
1
2
3
4
5

②耦合传参

耦合是指两个或两个以上的体系或两种运动形式间通过相互作用而彼此影响以至联合起来的现象。
在软件工程中，对象之间的耦合度就是对象之间的依赖性。
对象之间的耦合越高，维护成本越高，因 此对象的设计应使类和构件之间的耦合最小。

//组件1
<h1>传递参数02</h1>
<router-link to='/page/02/list'></router-link>
<router-view></router-view>
// 或动态参数num
// <router-link :to="/page+'/'+num+'/list'"></router-link>
1
2
3
4
5
6

//地址：@/router/index.js
//匹配规则 定义接收参数变量 id
{
path:'/page/:id/list',
component:page02
}
1
2
3
4
5
6

```javascript
//组件2
<h1>接收参数为：{{ $route.params.id }}</h1>
1
2
3
4

③解耦合传参（官方推荐用法）

解耦，字面意思就是解除耦合关系。
匹配规则添加props ，接收方式发生变化

//组件1
<h1>传递参数03</h1>
<router-link to='/page/03/list'></router-link>
<router-view></router-view>
// 或动态参数num
//<router-link :to="/page+'/'+num+'/list'"></router-link>
1
2
3
4
5
6

//地址：@/router/index.js
//匹配规则 
{
path:'/page/:id/list',
component:page01,
props:true
}
1
2
3
4
5
6
7

//组件2 
//接收写法 发生变化
...
<h1>接收参数为：{{id}}</h1>
...
//接收参数需要在props定义 props不要写在data(){}里面
...
//注意 props：['你路由规则中-定义的接收参数变量'] 为固定写法 props：['id']
{
props:['id'] 
data(){  //提示作用 可删
return{}
}
}
....
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

2、GET拼接字符串请求传参

①拼接字符传参 （耦合）

匹配规则添加props ，接收方式发生变化

//组件1
<h1>传递参数01</h1>
<router-link to='/page?id=01'></router-link>
<router-view></router-view>
1
2
3
4

//地址：@/router/index.js
//匹配规则 
{
path:'/page',
component:page,
}
1
2
3
4
5
6

//组件2 
//接收写法 发生变化
...
<h1>接收参数为：{{ $route.query.id}}</h1>
...
1
2
3
4
5

②拼接字符传参 （解耦合）

匹配规则添加props ，接收方式发生变化

//组件1
<h1>传递参数01</h1>
<router-link to='/page?id=01'></router-link>
<router-view></router-view>
1
2
3
4

//地址：@/router/index.js
//匹配规则 接收id复值 并传递给组件props
{
path:'/page',
component:page,
props：route=>({id:route.query.id})
}
1
2
3
4
5
6
7

//组件2 
//接收写法 发生变化
...
<h1>接收参数为：{{ id}}</h1>

js中定义props 中id
...
props：['id']  //注意别写在data（）内
data(){} //提示作用 可删

1
2
3
4
5
6
7
8
9
10

基础的路由信息基本就这些，看着简单，上手不易，运用时候一定要逐步来。
导航守卫推荐一篇文章

知乎vue-router导航守卫