使用 Vue.js 做项目的时候，一个页面是由多个组件构成的，所以在跳转页面的时候，并不适合用传统的 href，于是 vue-router 应运而生。
官方文档：
有很多朋友找我要 demo，但是博客中的这个案例被我删掉了，我只好随手写了一个超简单的 demo，希望能有所帮助
链接：/s/1nvqfA1V 密码：79bv
这次的实例主要实现下图的效果：
项目结构：
一、配置 Router
&用 vue-cli 创建的初始模板里面，并没有 vue-router，需要通过 npm 安装
cnpm i vue-router -D
安装完成后，在 src 文件夹下，创建一个 routers.js 文件，和 main.js 平级
然后在 router.js 中引入所需的组件，创建&routers 对象
import Home from './components/home.vue'
const routers = [
path: '/home',
name: 'home',
component: Home
path: '/',
component: Home
]export default routers
在创建的 routers 对象中， path 配置了路由的路径，component 配置了映射的组件
需要注意的是，export default routers 必须写在文件底部，而且后面还需要接一空行，否则无法通过 ESlint 语法验证
然后 main.js 也需要修改：
import Vue from 'vue'
import VueRouter from 'vue-router'
import routers from './routers'
import App from './App'
Vue.use(VueRouter)
const router = new VueRouter({
mode: 'history',
routes: routers
el: '#app',
render: h =& h(App)
在创建的 router 对象中，如果不配置 mode，就会使用默认的 hash 模式，该模式下会将路径格式化为 #! 开头。
添加 mode: 'history' 之后将使用 HTML5 history 模式，该模式下没有 # 前缀，而且可以使用 pushState 和 replaceState 来管理记录。
关于 HTML5 history 模式的更多内容，可以参考官方文档：
二、嵌套路由
在这个实例中，为了加深项目层级，App.vue 只是作为一个存放组件的容器：
其中 &router-view& 是用来渲染通过路由映射过来的组件，当路径更改时，&router-view& 中的内容也会发生更改
上面已经配置了两个路由，当打开 http://localhost:8080 或者 http://localhost:8080/home 的时候，就会在 &router-view& 中渲染 home.vue 组件
home.vue 是真正的父组件，first.vue、login.vue 等子组件都会渲染到 home.vue 中的 &router-view&
如此一来，就需要在一级路由中嵌套二级路由，修改 routers.js
import Home from './components/home.vue'
import First from './components/children/first.vue'
import Login from './components/children/login.vue'
const routers = [
path: '/',
component: Home,　　 children: [ 　　　{ 　　　　path: '/',
　　　 component: Login 　　
path: '/home',
name: 'home',
component: Home,
children: [
path: '/',
name: 'login',
component: Login
path: 'first',
name: 'first',
component: First
export default routers
在配置的路由后面，添加 children，并在 children 中添加二级路由，就能实现路由嵌套
配置 path 的时候，以 "&/ " 开头的嵌套路径会被当作根路径，所以子路由的 path 不需要添加 " / "
三、使用 &router-link& 映射路由
home.vue 中引入了 header.vue 组件，其中含有导航菜单
当点击导航菜单的时候，会切换 home.vue 中 &router-view& 中的内容
这种只需要跳转页面，不需要添加验证方法的情况，可以使用 &router-link& 来实现导航的功能：
在编译之后，&router-link& 会被渲染为 &a& 标签， to 会被渲染为 href，当 &router-link& 被点击的时候，url 会发生相应的改变
如果使用 v-bind 指令，还可以在 to 后面接变量，配合 v-for 指令可以渲染导航菜单
如果对于所有 ID 各不相同的用户，都要使用 home 组件来渲染，可以在 routers.js 中添加动态参数：
path: '/home/:id',
component: Home
这样 "/home/user01"、"/home/user02"、"/home/user03" 等路由，都会映射到 Home 组件
然后还可以使用 $route.params.id 来获取到对应的 id
四、编程式导航
实际情况下，有很多按钮在执行跳转之前，还会执行一系列方法，这时可以使用 this.$router.push(location) 来修改 url，完成跳转
push 后面可以是对象，也可以是字符串：
this.$router.push('/home/first')
this.$router.push({ path: '/home/first' })
// 命名的路由
this.$router.push({ name: 'home', params: { userId: wise }})
五、前车之鉴
在学习的过程中，遇到一个困扰许久的问题，大概是从 first 组件跳转回 login 之后，无法再跳转回去。但是 url 已经被修改，刷新页面也能正常显示。
这是因为我在 first.vue 组件中的 data 里面没有写 return
在 vue 组件中，data 必须写为函数，且需要用 return 来返回参数。但是当 data 为空时，即使不写 return 也不会报错，所以导致了上面的问题。
阅读(...) 评论()vue-router路由参数刷新消失的问题 - CNode技术社区
一点点啃node的前端新人
页面使用vue-router在跳转时发的参数有用来给下一个页面请求数据用的。在进入页面后再次刷新，参数就消失了。想询问一下可行的解决方案。
这是上个页面跳转写的。
这边是从上个页面接收这个参数请求数据
methods: {
console.log(this.$route.params.articleId);
this.params = this.$route.
this.articleId = this.params.articleId;
this.getArticleDetail(this.articleId);
getArticleDetail(id) {
this.$http({
method: &GET&,
url: &/getData/getArticleDetail&,
进入页面后再次刷新的话请求的数据就没有了。所以后台报错
请教一下合适的解决方案…万分感谢?
把 articleId 写进 url，用 query 试试
ajax，所有的数据都是通过ajax请求得来的
你在用 vue-router 跳转的时候可以把参数写进 query 里this.$router.push({name:'articleDetail, query:{articleId: articleId}});
这样你的 url 就会像 http://xxx.xxx.xxx/articleDetail?articleId=123，这样无论你怎么刷新 articleId 都不会丢失
然后在你的 init 方法里 可以用 this.articleId = this.$route.query.articleId; 来获取id
嗯嗯，我去看vue-router发现可以这样写了，感觉自己太水了。。。。
如果要用 params 传参的话，可能需要在你的路由路径里也加上这个参数，比如你用
this.$router.push({name:'articleDetail, params:{articleId: articleId}});跳转，那么在路由里就要这样写
path: '/articleDetail/:articleId',
name: 'articleDetail'
path: '/articleDetail/:articleId',里的 :articleId 是必须要有的
具体的可以参考
这个我倒是能理解的，而且这我觉得也是一个常规写法，楼主配置的方法可能跟你写的一样吧，不过他没贴出自己的路由配置所以也不知道。。。但我之前确实看到不同地方的说法，说把参数写到 query 里， url 层面携带参数，这样你刷新才能获取到，所以才对这个问题有了疑惑
所以我感觉楼主出错可能不一定是你说的，不过还是感谢你的回答
嗯，是的，我已经把路由按照命名路由的方式进行了修改。之前也是没有仔细的观看vue-router进行参考就埋头去写。导致问题重重。谢谢您费心的解答了。
CNode 社区为国内最专业的 Node.js 开源技术社区，致力于 Node.js 的技术研究。
服务器赞助商为
，存储赞助商为
，由提供应用性能服务。
新手搭建 Node.js 服务器，推荐使用无需备案的vue模板如何跳转到404页面
我的项目是公用head和foot的，我在路由中配置*指向404页面，此时头和脚都还在页面上，中间是404页面，请问如何整个跳转到404页面呢？需要和nginx一起配合使用吗？
可以直接window.location.href啊，Vue.js实战之利用vue-router实现跳转页面
作者：WiseWrong
字体：[ ] 类型：转载 时间：
对于单页应用，官方提供了vue-router进行路由跳转的处理，这篇文章主要给大家介绍了Vue.js实战之利用vue-router实现跳转页面的相关资料，需要的朋友可以参考借鉴，下面来一起看看吧。
使用 Vue.js 做项目的时候，一个页面是由多个组件构成的，所以在跳转页面的时候，并不适合用传统的 href，于是 vue-router 应运而生。
官方文档：
这次的实例主要实现下图的效果：
项目结构：
一、配置 Router
用 vue-cli 创建的初始模板里面，并没有 vue-router，需要通过 npm 安装
cnpm i vue-router -D
安装完成后，在 src 文件夹下，创建一个 routers.js 文件，和 main.js 平级
然后在 router.js 中引入所需的组件，创建 routers 对象
import Home from './components/home.vue'
const routers = [
path: '/home',
name: 'home',
component: Home
path: '/',
component: Home
export default routers
在创建的 routers 对象中， path 配置了路由的路径，component 配置了映射的组件
需要注意的是：export default routers 必须写在文件底部，而且后面还需要接一空行，否则无法通过 ESlint 语法验证
然后 main.js 也需要修改：
import Vue from 'vue'
import VueRouter from 'vue-router'
import routers from './routers'
import App from './App'
Vue.use(VueRouter)
const router = new VueRouter({
mode: 'history',
routes: routers
el: '#app',
render: h =& h(App)
在创建的 router 对象中，如果不配置 mode，就会使用默认的 hash 模式，该模式下会将路径格式化为 #! 开头。
添加 mode: 'history' 之后将使用 HTML5 history 模式，该模式下没有 # 前缀，而且可以使用 pushState 和 replaceState 来管理记录。
关于 HTML5 history 模式的更多内容，可以参考官方文档：
二、嵌套路由
在这个实例中，为了加深项目层级，App.vue 只是作为一个存放组件的容器：
其中 &router-view& 是用来渲染通过路由映射过来的组件，当路径更改时， &router-view& 中的内容也会发生更改
上面已经配置了两个路由，当打开 http://localhost:8080 或者 http://localhost:8080/home 的时候，就会在 &router-view& 中渲染 home.vue 组件
home.vue 是真正的父组件，first.vue、login.vue 等子组件都会渲染到 home.vue 中的 &router-view&
如此一来，就需要在一级路由中嵌套二级路由，修改 routers.js
import Home from './components/home.vue'
import First from './components/children/first.vue'
import Login from './components/children/login.vue'
const routers = [
path: '/',
component: Home,
　　 children: [
　　　　path: '/',
　　　 component: Login
path: '/home',
name: 'home',
component: Home,
children: [
path: '/',
name: 'login',
component: Login
path: 'first',
name: 'first',
component: First
export default routers
在配置的路由后面，添加 children，并在 children 中添加二级路由，就能实现路由嵌套
配置 path 的时候，以 " / " 开头的嵌套路径会被当作根路径，所以子路由的 path 不需要添加 " / "
三、使用 &router-link& 映射路由
home.vue 中引入了 header.vue 组件，其中含有导航菜单
当点击导航菜单的时候，会切换 home.vue 中 &router-view& 中的内容
这种只需要跳转页面，不需要添加验证方法的情况，可以使用 &router-link& 来实现导航的功能：
在编译之后， &router-link& 会被渲染为 &a& 标签， to 会被渲染为 href，当 &router-link& 被点击的时候，url 会发生相应的改变
如果使用 v-bind 指令，还可以在 to 后面接变量，配合 v-for 指令可以渲染导航菜单
如果对于所有 ID 各不相同的用户，都要使用 home 组件来渲染，可以在 routers.js 中添加动态参数：
path: '/home/:id',
component: Home
这样 "/home/user01"、"/home/user02"、"/home/user03" 等路由，都会映射到 Home 组件
然后还可以使用 $route.params.id 来获取到对应的 id
四、编程式导航
实际情况下，有很多按钮在执行跳转之前，还会执行一系列方法，这时可以使用 this.$router.push(location) 来修改 url，完成跳转
push 后面可以是对象，也可以是字符串：
this.$router.push('/home/first')
this.$router.push({ path: '/home/first' })
// 命名的路由
this.$router.push({ name: 'home', params: { userId: wise }})
五、前车之鉴
在学习的过程中，遇到一个困扰许久的问题，大概是从 first 组件跳转回 login 之后，无法再跳转回去。但是 url 已经被修改，刷新页面也能正常显示。
这是因为我在 first.vue 组件中的 data 里面没有写 return
在 vue 组件中，data 必须写为函数，且需要用 return 来返回参数。但是当 data 为空时，即使不写 return 也不会报错，所以导致了上面的问题。
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具}