vue路由的配置和页面切换详解

1.vue路由

可以实现单页面应用。

路由三要素：

vue路由通过hash的变化切换页面(组件/div)

<router-link>导航

<router-view>存储页面(组件）的容器

src/router/index.js路由的配置

实现步骤：

2.router配置

对router文件夹下的index.js进行配置

path：url

name：对应的参数的模块名称

component:组件名

用组件时一定要注册

 {
 path: '/product',
 name: 'Product',
 component: Product
 }

3.实现传参配置

配置

 {
 path: '/product/:id',
 name: 'Product',
 component: Product
 }

切换: <router-link to="/product/666">产品666</router-link>

接收: {{$route.params.id}}

4 子页面

配置

 {
 path: '/admin',
 name: 'Admin',
 component: Admin,
	children:[
		{path:"ucenter",component:Ucenter},
		{path:"activity",component:Activity},
		{path:"",redirect:"ucenter"}//重定向
	]
 },

重定向: {path:"",redirect:"ucenter"}

创建新的别名: alias:["/home","/main"]

切换: <router-link to="/admin/ucenter"></router-link>

5 页面切换

跳转：$router.go(-1)

后退：$router.back()

前进： ```$router.forward()``

新加历史记录切换页面：$router.push()

替换当前页面（不留历史记录）：$router.replace()

总结

到此这篇关于vue路由的配置和页面切换的文章就介绍到这了,更多相关vue路由的配置和页面切换内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue 开发之路由配置方法详解

    vue 开发之路由配置方法详解

    本文实例讲述了vue 开发之路由配置方法.分享给大家供大家参考,具体如下: 概要 用 Vue.js + vue-router 创建单页应用,是非常简单的.使用 Vue.js ,我们已经可以通过组合组件来组成应用程序,当你要把 vue-router 添加进来,我们需要做的是,将组件(components)映射到路由(routes),然后告诉 vue-router 在哪里渲染它们. 实现代码 1.在main.js 中引入 router.3 import router from './router/i

  • Vue路由模块化配置的完整步骤

    Vue路由模块化配置的完整步骤

    前言 企业运营后台页面很多,路由如若不区分模块化配置,所有路由挤在同一个文件将不好维护,所以路由的配置也要模块化 分享两个解决方案 -- Vue 路由配置的模块化(Plan A and Plan B) 注册需要 首先路由注册需要啥 // main.js new Vue({ el: '#app', router, store, components: { App }, template: '<App/>' }) // 这里的 router 是这样的 export default new Rout

  • vue动态路由配置及路由传参的方式

    动态路由: 当我们很多个页面或者组件都要被很多次重复利用的时候,我们的路由都指向同一个组件,这时候从不同组件进入一个"共用"的组件,并且还要传参数,渲染不同的数据 这就要用到动态路由跟路由传参了! 首先我们来了解下router-link这个组件: 简单来说,它是个导航器,利用to属性导航到目标组件,并且在渲染的时候会自动生成一个a标签,当然官方也有说明,加个tag标签属性就可以渲染不同的标签,可以浏览器端查看到 并且当一个导航器被激活的时候,会自动加上一个css的激活样式,可以全局在路

  • vue2 中二级路由高亮问题及配置方法

    实现效果图 1.项目中的图标使用的是element-ui框架中的图标,如果需要引入可以看我写的上一篇文章. 2.首先配置路由 我初始化项目的时候初始化了路由,所以打开router/index.js文件进行修改配置 router/index.js import Vue from 'vue' import Router from 'vue-router' import Home from '@/components/Home' import Game from '@/components/Game'

  • 使用vue-router为每个路由配置各自的title

    传统方法 以前在单页面路由中,就只能在html文件中定一个固定的网站的title.如果想要动态的去修改,需要使用如下的方法. document.title = '这是一个标题'; 这样会让我们做很多无用功.显得十分蠢. 使用Vue-Router的方法 首先打开/src/router/index.js文件. 找到如下代码. const vueRouter = new Router({ routes, mode: 'history', linkActiveClass: 'active-link',

  • vue router 配置路由的方法

    用 Vue.js + vue-router 创建单页应用,是非常简单的.使用 Vue.js ,我们已经可以通过组合组件来组成应用程序,当你要把 vue-router 添加进来,我们需要做的是,将组件(components)映射到路由(routes),然后告诉 vue-router 在哪里渲染它们. 路由的基本实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&

  • vue.js路由mode配置之去掉url上默认的#方法

    比如 : http://localhost:8080/#/login 路由中间默认带有 # 如果需要去掉#,只需将mode的默认值'hash'改为'history'即可. router.js : import Router from 'vue-router' import routers from './routers' export default () => { return new Router({ routers, mode: 'history' // 加上这个配置项,url默认的 #

  • 详解vue2路由vue-router配置（懒加载）

    vue路由配置以及按需加载模块配置 1.首先在component文件目录下写俩组件: First.vue: <template> <div>我是第一个页面</div> </template> <script> export default { name: 'first', data () { return { msg: 'Welcome to Your Vue.js App' } } } </script> <!-- Add &

  • 深入理解vue2.0路由如何配置问题

    这两天学习了Vue.js 感觉路由这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记. 项目基本手脚架搭建完毕后,建一个router文件夹,里面配置一个index.js文件. 文件内容: npm install vue-router vue-resource --save-dev(安装 vue 路由模块vue-router和网络请求模块vue-resource) import Vue from 'vue' import Router from 'vue-router' (----引入路由

  • 在vue-cli脚手架中配置一个vue-router前端路由

    前言 这篇文章给大家讲解的是在vue-cli脚手架中如何配置vue-router前端路由的相关内容,分享出来供打击参考学习,下面来一起看看详细的介绍: 首先你需要一个main.js文件 //然后引入vue-router import VueRouter from 'vue-router'; //使用路由 Vue.use(VueRouter); //当然如果需要有组件进来的时候也是需要引入的 import Home from '../components/Home.vue'; import New

随机推荐

其他