vue-router使用
参考官方文档
https://router.vuejs.org/zh-cn/
------------------------------------------
路由安装
npm install --save vue-router
安装完成后,打开package.json,如果看到这个"vue-router": 版本号,
就代表安装成功了
"dependencies": {
"axios": "^0.18.0",
"vue": "^2.5.2",
"vue-router": "^3.0.1",
"vuex": "^3.0.1"
},
路由使用
1.如果你在安装脚手架的时候选择安装了路由,那么在你的目录下
找到router文件夹的index.js,在这里配置你的路由
打开这个index.js应该有这些东西:
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
//export default 是对外暴露这个配置
export default new Router({
routes: []
})
你的可能跟我的有些不一样,我这里删除了原先定义的路由
2.如果你安装脚手架的时候没有选择安装路由,那就在src目录下
新建一个router文件和一个index.js,在这个js文件里配置全部
路由,推荐把路由配置文件单独抽离出来
这样做完之后,打开main.js,使用下路由
import Vue from 'vue'
import App from './App'
//这里引入你刚才定义的 router下的index.js
/*
注意:只有是index.js的文件,引入的时候不用像下边这样写
import router from './router/index.js',
可以省略掉indx.js,而如果是其它的名字就要引入全部
比如:import router from './router/router.js'
*/
import router from './router'
new Vue({
el: '#app',
router, // 引入后在这里使用下
components: { App },
template: '<App/>'
})
这样搞完后,路由基本已经配置完成
使用路由
首先,我们在components文件夹下准备几个.vue文件,这里我准备了5个
Header.vue Home.vue Phone.vue Shequ.vue News.vue
Header.vue 我们当做一个导航的公共部分!这里就不贴图了
打开App.vue 引入header.vue文件
<template>
<div id="app">
<appheader></appheader>
<!-- 路由匹配到的组件将渲染在这里 -->
//<keep-alive> 标签内置组件用来缓存路由的
<transition name="fade" mode="out-in">
<keep-alive>
<router-view></router-view>
</keep-alive>
</transition>
</div>
</template>
<script>
import appheader from './components/Header'
export default {
components:{
appheader
}
}
</script>
<style scoped>
// 加入一个淡入淡出效果
.fade-enter-active, .fade-leave-active{
transition: all .3s;
}
.fade-enter, .fade-leave-to{
opacity: 0;
}
</style>
推荐vscode 使用者下载插件
Vue VSCode Snippets
-------------------
然后再 .vue文件中 输入vbase 回车 模板就好了
打开header.vue
<template>
<div class="header">
<header>
<ul>
<li>
<router-link to="/">主页</router-link>
</li>
<li>
<router-link to="/news">新闻</router-link>
</li>
<li>
<router-link to="/shequ">社区</router-link>
</li>
<li>
<router-link to="/phone">电话</router-link>
</li>
</ul>
</header>
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
ul li{
list-style: none;
float: left;
padding: 10px;
}
header{
background-color: #666;
height: 45px;
}
a{
color: #fff;
}
</style>
我们看到一个:
<router-link to="/">主页</router-link>
这个标签,官方文档解释很清楚:
<router-link> 组件支持用户在具有路由功能的应用中(点击)导航。
通过 to 属性指定目标地址,默认渲染成带有正确链接的 <a> 标签
所以这个to后边跟的就是你跳转的路径名字,这个必须待有,不写会报错
启动服务器,你就看到了一个导航,有的可能看不到啊,你需要修改你原先里的东西
到这里这个导航就写完了,下边我们看看怎么配置跳转路径
路由路径配置
打开router文件夹下的index.js
配置第一个路由路径:
第一种写法:
这里的path属性的值要与前边 to="/" 的名字一样,否则找不到
<router-link to="/">主页</router-link>
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
import Home from '../components/Home.vue'
import News from '../components/News.vue'
import Phone from '../components/Phone.vue'
import Shequ from '../components/Shequ.vue'
export default new Router({
mode:'history',
routes: [
{
path: '/',
component:Home
},
{
path: '/news',
component:News
},
{
path: '/shequ',
component:Shequ
},
{
path: '/phone',
component:Phone
},
]
})
第二种写法,个人比较喜欢的
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
mode:'history', //去掉地址栏的#号
routes: [
{
path: '/',
name: 'HomeLink',
component: (resolve) => require(['../components/Home.vue'],resolve)
},
{
path: '/news',
component: (resolve) => require(['../components/News.vue'],resolve)
},
{
path: '/shequ',
component: (resolve) => require(['../components/Shequ.vue'],resolve)
},
{
path: '/phone',
component: (resolve) => require(['../components/Phone.vue'],resolve)
},
]
})
以上路由配置完已经可以自由的跳转了,上边用到了一个name属性,意思是命名路由
{
path: '/',
name: 'HomeLink', //对路由起别名
component: (resolve) => require(['../components/Home.vue'],resolve)
},
然后router-link这里也可以这么写
<router-link :to="{ name: 'HomeLink' }">User</router-link>
如果你的地址栏带了一个#号,看的不舒服,可以配置history模式
mode:'history',
但有时候用户可能会手动输入地址,但他要是输入一个不存在的路由
我们还要对这个进行处理,我们可以在components下再建立一个404.vue 文件
然后在router/index.js路由配置的数组中加入另一个对象
* 是匹配所有的路由,如果找不到,让它往哪去.
{
path:'*',
component:(resolve) => require(['../components/404.vue'],resolve)
}
或者我们使用 redirect 让它重定向到首页
{
path:'*',
redirect:'/'
}
下边说一下自己怎么进行路由跳转,实际开发中,我们可能会需要
自己会进入到某一个特定的路由,你就需要在代码中加入:
router.replace(path)和router.push(path),该方法接收传参:
举个例子:
// 字符串
router.push('home')
// 对象
router.push({ path: 'home' })
**router.go(n)方法**
这个方法的参数是一个整数,意思是在 history 记录中向前或者后退多少步,
类似 window.history.go(n)。
例子
// 在浏览器记录中前进一步,等同于 history.forward()
router.go(1)
// 后退一步记录,等同于 history.back()
router.go(-1)
// 前进 3 步记录
router.go(3)
// 如果 history 记录不够用,那就默默地失败呗
router.go(-100)
router.go(100)
关于路由传参
有时候我们的路由跳转过去,需要配置一些参数
第一种方法:
在Header.vue中
新闻路由:传参数 you
<router-link to="/news/you">新闻</router-link>
在路由的配置文件 index.js 中写法
{
path: '/news/:name',
props:true,
component: (resolve) => require(['../components/News.vue'],resolve),
},
在News.vue中接收参数:这里的name就拿到了 渲染出来就是参数值you
<template>
<div>
新闻
{{name}}
</div>
</template>
<script>
export default {
props:['name']
}
</script>
第二种带查询参数的路由
在Header.vue中
社区路由:传参数 userId
<router-link :to="{ name: 'Shequ', query: { userId: 123 }}">社区</router-link>
在路由的index.js中 给路由起个别名:
{
path: '/shequ',
name: "Shequ",
component: (resolve) => require(['../components/Shequ.vue'],resolve),
},
在Shequ.vue文件中接收:$route.query.userId
<!-- 带查询参数,下面的结果为 /shequ?userId=123 -->
<template>
<div>
社区
{{ $route.query.userId }}
</div>
</template>
<script>
export default {
}
</script>
第三种方法
Header.vue中
<router-link :to="{ name: 'Phone', params: { id: 123 }}">电话</router-link>
路由的index.js中
{
path: '/phone/:id',
name:'Phone',
component: (resolve) => require(['../components/Phone.vue'],resolve)
},
Phone.vue中接收
<template>
<div>
电话
{{ $route.params.id }}
</div>
</template>
更多高级路由请参考文档,权限问题请参考路由导航守卫,组件内导航守卫