vue前端路由

前端路由

 

Vue Router基本使用

1.引入库文件

首先引用vue文件，再引用vue-router

2. 添加路由链接

<router-link to="/路由">User</router-link>

// to 属性后添加 Hash地址

3.添加路由填充位

<router-view></router-view>

4.定义路由组件

5.配置路由规则并创建路由实例

//path 属性对应 ‘ hash路由地址’   component ：对应组件

6.把路由挂载到Vue根实例中

将router添加到data数据中

 

路由重定向

redirect属性 

{ path: '/', redirect: '/user'}  在创建路由实例时，如果为默认/地址，将重定向为指定的地址

 

嵌套路由

1.父路由组件声明时模板携带 子路由 即<router-link to="/父路由/子路由">User</router-link>

2.添加子组件占位符

3.声明子组件

4.路由规则中找到父级路由并 添加 children数组，数组中写法相同 

例：

{ path: '/register', component: Register, children: [

            { path: '/register/tab1', component: Tab1 },

            { path: '/register/tab2', component: Tab2 }

] }

 

动态匹配路由基本用法

当多个参数时，我们通过   :id   的方式即可动态匹配路由  ；例{ path: '/user/:id', component: User }

声明组件时  可通过router.params获取路由参数

 

实际开发中多采用如下方式

1.props传递布尔值

路由规则声明过程中 将props属性设置为true

声明组件过程中  通过 props:  [ ' id' ]   的形式接收参数 

使用路由参数通过插值表达式即可

2.props的值为对象类型   //此时不可以获取id的值

3.props的值为函数类型

 

命名路由

创建路由规则的时候添加 name 属性 对路由规则进行区分

添加路由链接时 对 to 进行绑定 :to  并传递对象形式参数  {name:' 别名' ,params:(键值对)}

 

编程式导航 

用于通过点击或其他方式进行跳转页面时

this.$router.push('hash地址')

this.$router.go()

参数规则

router.go()