vue-router路由的使用

1、路由作用

用vue.js + vue-router创建单页面应用。页面不需要刷新就可以页面跳转，提供用户更好体验。

2、路由配置

new Router({routes: [{path: '/', //匹配路径name: 'Hello', //路由的别名component: Hello //需要加载的组件名
        }, {//使用变量名的形式传递参数。例如：/detail/10086//在Detail组件中使用{{$router.params.id}}来接收path: '/detail/:id',name: 'Detail',component: Detail}]
})

3、路由跳转

<router-link :to="{name:'Detail',params:{id:10086}}">详情</router-link>

4、实践：两组件之间跳转

代码实例4.1、index.js
import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/component/Hello'
import Detail from '@/component/Detail'Vue.use(Router)export defaultnew Router({router: [{path: '/',name: 'Hello',component: Hello}, {path: '/detail/:id',name: 'Detail',component: Detail}]
})4.2、Hello.vue：src->component->Hello.vue<template><div class = "hello" ><h1>这是hello页面 </h1>< router - link: to = {name: 'Detail',params: {id: 10086}}>详情</router-link></div></template><script>
export default{name: 'hello',data() {return {msg: 'hello vue'}}
}</script>< !--add "scoped" attribute limit css to this compent only-- ><style scoped>h1, h2 {font - weight: normal;}ul {list - style - type: none;padding: 0;}li {display: inline - block;margin: 0 10px;}a {color:  # 42b983}</style>4.3、Detail.vue：src->component->Detail.vue< template >< div >< h1 > 这是detail页面 </h1>
 {{$route.params.id}}</div></template><script>
export default{name: 'hello',data() {return {}}
}</script>< !--add "scoped" attribute limit css to this compent only-- >< style scoped ></style>4.4、启动项目
my_vue_app > npm run dev

5、vue组件由三部分组成

vue组件：template:html代码、 script:javascript代码、style:css代码

转载于:https://www.cnblogs.com/chenweichu/p/9302219.html

vue-router路由的使用相关推荐

Vue Router 路由管理
文章目录 Vue Router 路由管理概述安装简单使用定义2个组件定义路由信息支持路由使用路由动态路由配置动态路由配置404 限制动态参数嵌套路由命名路由编程式导航简单使 ...
【Vue】相关生态——Vue Router路由
Vue Router路由基本使用带参数的动态路由匹配捕获所有路由或404 Not found 路由嵌套路由编程式导航重定向和别名将props传递给路由组件不同的历史模式进阶导航守卫 ...
Vue Router路由常用功能总结
Vue Router路由常用功能总结一.前言二.安装 1. vueCLI安装 2. npm安装三.路由配置及使用: 1. 基本配置: 2. 动态路由: 3. 嵌套路由: 四.编程式的导航五.重 ...
Vue 学习(十、 Vue Router - 路由插件和 Vue 的插件原理)
文章目录一.Vue Router - 路由插件 1. 安装 Vue Router 2. Vue Router 路由的基本使用 3. 设置 router-link 4. 编程式路由 5. 路由嵌套 6 ...
Vue.js 3.0 学习笔记（十一）Vue Router路由
一.使用Vue Router 1.HTML页面使用路由 <!DOCTYPE html> <html> <head><meta charset="UT ...
Vue | Vue Router 路由的使用
文章目录一.路由的基本使用 1.创建 Vue 项目并引入 vue-router 2.编写 Components 组件 3.编写路由文件 4.在主文件 Main.js 中引入路由 5.添加 route ...
Vue Router 路由导航
Vue Router 通过 Vue.js,我们已经用组件组成了我们的应用.当加入 Vue Router 时,我们需要做的就是将我们的组件映射到路由上,让 Vue Router 知道在哪里渲染它们. V ...
Vue Router路由模式的区别进程线程的区别
Vue Router hash模式和history模式的区别 hash模式url里面永远带着#号,我们在开发当中默认就是hash模式. 那么什么时候需要用到history模式呢? 肯定是用户觉得#号太 ...
vue router 路由跳转方法概述
一.概述使用到Vue的项目,我们最常见使用的就是Vue配套的Vue Router库. 那么在平日开发中,有多少种跳转路由的方法? 二.跳转方法 1.使用router-link标签使用router- ...
vue项目没有router文件夹_vue项目——Vue Router路由的使用
前言: 学习vue也有一段时间了,这里把学习整个vue项目中的一些知识点和问题,整理下方便自己记录,也希望给大家带来方便.我会连续写几篇系统的文章,讲解一个完整的vue项目中用到的各个使用模块.今天先 ...

vue-router路由的使用

vue-router路由的使用相关推荐

最新文章

热门文章