1.前言
为了更好的理解
router建议看下文章 前端路由基础对于大多数单页面应用，都推荐使用官方支持的 vue-router 库。更多细节可以移步 vue-router 文档。
先不使用单文件组件
需求分析
为什么用
router有没有其他方式
SPA单页不能刷新
- History api /home
- hash #/home
参看 这篇文章 前端路由基础
根据URL 显示对应的内容
router-view
数据响应式:current变量代表当前地址,一旦变化,动态重新执行
render
2. 基础语法
html
router-link是一个组件，该组件用于设置一个导航链接，切换不同的HTML页面内容（组件），属性to是目标地址，本质上该组件会被渲染成一个a标签
router-view路由出口，路由跳转时匹配的路径对应的组件会将渲染到这里
<div id="app"> <h1>{{msg}}</h1> <!-- <router-view></router-view> --> <!-- 路由跳转部分 --> <div> <router-link to="/">home</router-link> -------- <router-link to="/about">about</router-link> </div> <!-- 路由出口，路由跳转时匹配的路径对应的组件会将渲染到这里 --> <router-view></router-view> </div>
js
<script type="text/javascript"> // 注册局部组件 const 修饰的变量不能被改变 const NotFound = { template: '<p>Page not found</p>' } const Home = { template: '<p>home page</p>' } const About = { template: '<p>about page</p>' } //1.配置路由,定义路由对象,每个路由可以映射一个路径 -- 组件 const routes = [{ // /代表默认路由 path: "/", component: Home }, { path: "/about", component: About } ]; //2.创建路由实例对象 router ,然后配置路由信息 const router = new VueRouter({ // routes:rs, routes }); // 创建和挂载vue实例时,同时使用router配置参数注入路径信息 var ve = new Vue({ // router:router, router, el: "#app", data: { msg: "路由router学习" }, components: { Home, About, NotFound } }); </script>
3. 路由-传参
核心是
- 路由配置
{ // 路由路径信息中以nameID传值 path: "/first/:nameID", component: First }, { // 动态路径 id是一个动态的数字,代表是可选的 path: "/second/:id(\\d*)?", component: Second }
- 使用 跟上参数
<router-link to="/first/1">first页面</router-link>
3.获取传值 那肯定在对应的钩子里面
created(){ console.log("first界面创建"); // 组件被创建完成的方法 console.log(this.names); // 当前的路由对象 console.log(this.$route); // 当前路由传递的参数 console.log(this.$route.params); this.selectName = this.names[this.$route.params.nameID]; }
4.命名路由
4.1 命名路由 配置
核心 路由配置 加个name属性
这里强调一点 这个 路由的name属性 和组件内部的name属性 没有关系
组件内部的
name属性主要用来标识组件 调试方便
{ // 第二种方式:通过命名式路由跳转 path:"/home", name:"home", component:Home }, { path:"/artD", name:"article", component:Article },
4.2命名路由使用-1
绑定
to属性参数是 对象 键是
name值是 上面配置的复制
<router-link :to="{name:'home'}">小说首页</router-link>
4.3命名路由使用-2
直接绑定一个对象
<router-link :to="homeObj">小说首页</router-link>
数据源配置
data:{ homeObj:{ name:"home" }
5. 命名路由传参
这个属于菜单层级的跳转
比如一级跳二级 需要传参
商品页 跳入详情页需要商品id
核心是配置
params传参
<li v-for="(v,i) in articles"> ---------命名式跳转: <router-link :to="{name:'art',params:{artID:v},query:{obj:v}}">{{v.title}}</router-link> </li>
获取传的参数 钩子
created(){ console.log("ArtDetail组件创建完成!"); //params 接收路由跳转时,url路径中的信息 console.log(this.$route.params); // query 接收路由跳转时,传递的参数信息 console.log(this.$route.query); // 接收路由传递过来的对象 // this.artObj = this.$route.params.artID; // 或者 this.artObj = this.$route.query.obj; },
完整的简易 结构展示如下
<body> <div id="app"> <div> <!-- 第二种方式：命名式路由跳转 --> <!-- <router-link :to="{name:'home'}">小说首页</router-link> --> <router-link :to="homeObj">小说首页</router-link> ------- <router-link :to="{name:'article'}">小说列表</router-link> </div> <!-- 路由出口 --> <router-view></router-view> </div> </body> <!-- 自定义动态组件 --> <script type="text/x-template" id="home"> <div> <h2>小说首页加载完成</h2> <ul> <li>首页模块1</li> <li>首页模块2</li> <li>首页模块3</li> <li>首页模块4</li> <li>首页模块5</li> </ul> </div> </script> <!-- 小说列表 --> <script type="text/x-template" id="article"> <div> <h2>小说列表页</h2> <ul> <li v-for="(v,i) in articles"> ---------命名式跳转: <router-link :to="{name:'art',params:{artID:v},query:{obj:v}}">{{v.title}}</router-link> </li> </ul> </div> </script> <!-- 小说详情 --> <script type="text/x-template" id="artdetail"> <div v-if="show"> <h1>{{artObj.title}}</h1> <p>{{artObj.content}}</p> </div> </script> <script type="text/javascript"> //模拟后台返回的数据为 var dataArr = [{id:1,title:"被讨厌的勇气",content:"被讨厌的勇气并不是要去吸引被讨厌的负向能量，而是，如果这是我生命想绽放出最美的光彩，那么，即使有被讨厌的可能，我都要用自己的双手双脚往那里走去。"}] // 自定义组件 -- 小说首页 Home const Home = { template:`#home` }; // 小说列表页 --- Article const Article = { template:`#article`, data(){ return { articles:dataArr } } }; //小说详情 --- ArtDetail const ArtDetail = { template:`#artdetail`, data(){ return { artObj:null, show:false } }, created(){ console.log("ArtDetail组件创建完成!"); //params 接收路由跳转时,url路径中的信息 console.log(this.$route.params); // query 接收路由跳转时,传递的参数信息 console.log(this.$route.query); // 接收路由传递过来的对象 // this.artObj = this.$route.params.artID; // 或者 this.artObj = this.$route.query.obj; }, mounted(){ this.show = true; } } // 配置路由信息 const rs = [ { // 第二种方式:通过命名式路由跳转 path:"/home", name:"home", component:Home }, { path:"/artD", name:"article", component:Article }, { path:"/artDetil", name:"art", component:ArtDetail } ]; // 创建一个路由实例对象 const router = new VueRouter({ routes:rs }); // 路由配置信息 var ve = new Vue({ router, el:"#app", data:{ homeObj:{ name:"home" }, articleD:"/article" } }) </script>
6. 不经常使用的 path方式
6.1 路由配置
{ path: "/artDetail/:artID", component: ArtDetail }
6.2 使用
<div id="app"> <div> <!-- 第一种方式：path路径跳转 --> <router-link to="/home?name='小说'&price=116">小说首页</router-link> ------- <router-link to="/article">小说列表</router-link> </div> <!-- 路由出口 --> <router-view></router-view> </div>
6.3组件 定义
也是拼接
<!-- 小说列表 --> <script type="text/x-template" id="article"> <div> <h2>小说列表页</h2> <ul> <li v-for="(v,i) in articles"> <!-- /artDetail/5?title=zx&con=kkk --> path跳转: <router-link :to="'/artDetail/'+v.id+'?title=' + v.title + '&con=' + v.content">{{v.title}}</router-link> </li> </ul> </div> </script>
6.4获取值
created() { console.log("ArtDetail组件创建完成!"); //params 接收路由跳转时,url路径中的信息 console.log(this.$route.params); // query 接收路由跳转时,传递的参数信息 console.log(this.$route.query); // 接收路由传递过来的id this.artObj = dataArr[this.$route.params.artID - 1]; },
