1.vue-router的使用方式
- 下载安装
vue-router
npm install vue-router --save
执行该命令之后，就会在项目中的node_modules文件夹下有此插件
- 引用
vue-router
在src/router/index.js中引用vue-router(引用node_modules中的插件都不需要写路径，直接是插件名)
import VueRouter from 'vue-router';
- 使用
vue-router，vue-router是通过Vue.use的方法被注入进Vue 实例中,Vue 通过 use 方法，加载Router中的install方法。install完成Vue 实例对VueRouter的挂载过程。
import Vue from 'vue'
//引用vue-router并取名为router
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
//使用Router
Vue.use(Router)
//创建路由对象并配置路由规则
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
})
- 将其路由对象传递给Vue的实例，options中加入 router
在main.js中引入路由
import Vue from 'vue'
import App from './App'
//引入创建号的路由文件
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,//使用
components: { App },
template: '<App/>'
})
- 在App.vue中留坑
<router-view></router-view>
<template>
<div id="app">
<!--负责渲染路由指定页面的内容,有路由就必须要留这个-->
<router-view></router-view>
</div>
</template>
2.vue-router参数传递
【1】在src/router/index.js中配置name属性，则在App.vue中用$route.name可以获取到name的值
export default new Router({
routes: [
{
path: '/',
name: 'homepage',
component: homepage
}
]
})
App.vue
<div id="app">
<!--负责渲染路由指定页面的内容-->
<router-view></router-view>
{{$route.name}}
</div>
2.1name属性传参
【2】通过<router-link></router-link>中的to属性传参
<router-link> 是一个组件，该组件用于设置一个导航链接，切换不同 HTML 内容。to属性为目标地址，表示目标路由的链接。 当被点击后，内部会立刻把 to 的值传到 router.push()，所以这个值可以是一个字符串或者是描述目标位置的对象。
方式一：通过params获取（相当于post请求）
这种传参方法的基本语法：
<router-link :to="{name:xxx,params:{key:value}}">valueString</router-link>
举个例子：
App.vue中
<div id="app">
<router-link :to="{name:'homepage',params:{nameId:'123'}}">homepage</router-link>
<router-view></router-view>
</div>
在src/router/index.js中设置路由规则
import Vue from 'vue'
import Router from 'vue-router'
import homepage from '@/components/homepage'
Vue.use(Router)
export default new Router({
routes: [
//其中的name要和App.vue中设置传参数中的name一致
{path: '/homepage', name: 'homepage', component: homepage}
]
})
在组件中用$route.params获取从App.vue中传的参数
<div> {{$route.params}}</div>
接收的参数结果如下：
2.1通过params获取
方式二：vue-router 利用url传递参数----在配置文件里以冒号的形式设置参数。
在src/router/index.js文件中的路由配置项path中设置带冒号的参数
export default new Router({
routes: [
{path: '/homepage/:id/:name', name: 'homepage', component: homepage}
]
})
我们需要传递参数是id和name.所以我们在路由配置文件里制定了这两个值。
在src/components目录下建立我们homepage.vue组件，也可以说是页面。我们在页面里输出了url传递的的id和name。
<template>
<div class="hello">
<h1>{{ msg }}</h1>
{{$route.params.id}}
{{$route.params.name}}
</div>
</template>
<script>
export default {
name: 'homepage',
data () {
return {
msg: 'This is HomePage'
}
}
}
</script>
在App.vue文件里加入<router-view>标签。这时候我们可以直接利用url传值了
//注意：这时候to前面不需要冒号了
<router-link to="/homepage/12/cherry">homepage</router-link>
传参结果如下：
2.2.to传参
方式三：使用path来匹配路由，然后通过query来传递参数（相当于get请求）
在App.vue中
<router-link :to="{name:'homepage',query:{nameId:'123'}}">homepage</router-link>
在src/router/index.js中
export default new Router({
routes: [
{path: '/homepage/:id/:name', name: 'homepage', component: homepage}
]
})
点击跳转，会看到传递的参数以问号隔开拼接在url后面，可以通过this.$route.query来获取
<div>{{this.$route.query}}</div>
2.3.通过query来传递参数
3.vue-router配置子路由
【1】在App.vue中，用<router-link>标签增加了两个新的导航链接
<router-link :to="{name:'homepage'}">首页</router-link>
<router-link :to="{name:'page1'}">页面1</router-link>
<router-link :to="{name:'page2'}">页面2</router-link>
或者以下
<router-link to="/">首页</router-link>
<router-link to="/page1">页面1</router-link>
<router-link to="/page2">页面2</router-link>
【2】在homepage.vue加入<router-view>标签，给子模板提供插入位置,子路由的<router-view>必须在其父路由所在的页面homepage.vue中出现
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<router-view></router-view>
</div>
</template>
【3】在components目录下新建两个组件模板 page1.vue 和 page2.vue
两者内容类似，以下是page1.vue页面内容：
<template>
<div>{{msg}}</div>
</template>
<script>
export default {
data () {
return {
msg:'This is Page1'
}
}
}
</script>
【4】修改router/index.js代码，子路由的写法是在原有的路由配置下加入children字段
import Vue from 'vue'
import Router from 'vue-router'
import homepage from '@/components/homepage'
import page1 from '@/components/page1'
import page2 from '@/components/page2'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'homepage',
component: homepage,
children:[
{
path: '/page1',
name: 'page1',
component: page1
},
{
path: '/page2',
name: 'page2',
component: page2
}
]
}
]
})
结果：
3.子路由
4.$route 和 $router 的区别
打印出$route和router
<button @click="test">点击</button>
this.$route
methods: {
test () {
console.log(this.$route)
}
}
4.1.this.$route
$route 是“路由信息对象”，包括 path，params，hash，query，fullPath，matched，name 等路由信息参数。
-
$route.path字符串，对应当前路由的路径，总是解析为绝对路径，如 "/order"。 -
$route.params一个 key/value 对象，包含了 动态片段 和 全匹配片段，如果没有路由参数，就是一个空对象。 -
$route.query一个 key/value 对象，表示 URL 查询参数。例如，对于路径/foo?user=1，则有$route.query.user为1，如果没有查询参数，则是个空对象。 -
$route.hash当前路由的 hash 值 (不带 #) ，如果没有 hash 值，则为空字符串。 -
$route.fullPath完成解析后的 URL，包含查询参数和 hash 的完整路径。 -
$route.matched数组，包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。 -
$route.name当前路径名字
this.$router
methods: {
test () {
console.log(this.$router)
}
}
4.2.this.$router
$router是“路由实例”对象，即使用 new VueRouter创建的实例，包括了路由的跳转方法，钩子函数等。
this.$router.go(-1)//跳转到上一次浏览的页面
this.$router.replace('/page1')//指定跳转的地址
this.$router.replace({name:'page1'})//指定跳转路由的名字下
this.$router.push('/page1')//通过push进行跳转
this.$router.push({name:'page1'})//通过push进行跳转路由的名字下
