学习vue路由(详解)
好久没更新了,因为最近在做微信小程序的项目。 没时间更新,今天抽出时间来说说vue的路由。正题:最简单的路由(非vue-cli):1.需要在新建的html文件里引入routes.js文件2.HTML代码:<div id="app"><ul><li><router-link to=.
好久没更新了,因为最近在做微信小程序的项目。 没时间更新,今天抽出时间来说说vue的路由。
正题:
最简单的路由(非vue-cli):
1.需要在新建的html文件里引入routes.js文件
2.HTML代码:
<div id="app">
<ul>
<li>
<router-link to='/home'>首页</router-link>
</li>
<li>
<router-link to='/list'>详情</router-link>
</li>
<li>
<router-link to='/delit'>我的</router-link>
</li>
<li>
<router-link to='/my'>我的</router-link>
</li>
</ul>
<router-view></router-view>//输出
</div>
js代码:
//1 创建组件
var Home = {template:'<h1>我是首页</h1>'}
var List = {template:'<h1>我是列表页</h1>'}
var Delit = {template:'<h1>我是列表</h1>'}
var My = {template:'<h1>我是我的</h1>'}
//2 配置路由路径
const routes=[
{
path:'/home',//这里面的“home可以随便起名字,
//只是为了对应,我们把它起名叫做home”
component:Home
},
{
path:'/list',
component:List
},
{
path:'/delit',
component:Delit
},
{
path:'/my',
component:My
}
]
//3.实例化路由,并把配制的路由路径挂载到VueRouter上:
const router = new VueRouter({
routes
})
//4
new Vue({
router:router,//注意我上面的routes是简写了,如果你配置路
//径的数组名不是“routes”,那就要写全。
el:'#app'
})
上面说了如何不用VUE-cli来实现路由跳转;
(其实上面主要是方便你来理解下面的,真正写项目,我们基本不会用到上面的方式)
如何用vue-cli来实现
:
首先你必须搭建好了vue的脚手架,然后才能继续下面的操作:
首先你需要下载路由,(用NPM安装):
npm install vue-router
然后去看你的package.json
文件,里面会有一个:
证明你已经安装成功,接下来就去使用吧。
我在桌面安装好了vue-cli,
我的项目就叫做“myobj”,
之后cd进入“myobj”目录,
执行
npm run dev
启动VUE
然后来说一下文件目录:
注意看src
目录;
这assets
放图片,
这components
存放组件,
这router
存放的是配置路由的JS文件,
这APP.vue
平时基本不会去动它,
然后来看一下router目录的index.js
:
我们看到,1-3行,用了ES6的模块引入,先引入了“vue”,还有“vue-router”,然后是一个叫做“HelloWorld”的组件,后面跟的是路径,当然了,这个不用细说,
下面要调用use
这个方法,全局的使用一下Router。如果你用的是”webpack”而不是“webpack-simble”的话,那么就不需要管这些了,因为’webpack’自动的配置好了。
接下来抛出就行了,也就是代码的7-15行。
接下来我们自己写一个组件:
比如就叫做组件A.vue
然后在A.vue里写:
<template>
<div>
<h1>我是A组件</h1>
</div>
</template>
这里是组件的写法,这里就不细说了,组件是啥,大家也都知道,值得注意的是,
template标签它只能包一个标签,也就是说它只能包一个最大的父级,在这个最大的父级里面随便你怎么布局,但是如果同时让template标签包裹两个标签,会报错。这里是编写页面时需要注意的一点。
接下来就在router 里的index.js里引入A这个组件>配置路由路径>然后在用router-link引入就可以了
之后:
当我点击到A
时,可以跳转到A页面;
嵌套路由:
嵌套路由和平时的写法差不多,不过配置路由路径时写法要注意:
比如下面写一个list下面的detail页面: /list/detail
配置时:
import List from './list.vue';
import Detail from './detail.vue'
const routes =[
{
path:'/list',
component:List,
{
path:'detail',//这里需要注意不写“/”
component:Detail
}
}
]
html代码:
<router-link to='/list/detail'></router-link>
假如我们配置了一大堆的路由,那么想让页面一进来就显示我们想要显示的页面怎么办呢?
路由重定向:
官方解释:『重定向』的意思是,当用户访问 /a时,URL 将会被替换成 /b,然后匹配路由为 /b
只需要在配置路由路径的routes 数组里的最后一项这么写:
const router = new VueRouter({
routes: [
{ path: '/a', redirect: '/b' }
]
})
路由重定向也可是一个命名的路由,也就是在name那写的,还可以是一个方法;具体我就不多说了,看一下官网吧:
https://router.vuejs.org/zh-cn/essentials/redirect-and-alias.html
之后还有一些路由动态跳转的方法;
配置路由时在路径后加 /:id
,之后在另一个页面用$route.params.id来接收;
还有一个就是用“$route.query.name”来访问动态绑定的路由
等下次更新再说吧。最近生病了,大家注意身体健康。
如果你发现上述有误,或者你认为某些地方你觉得有误,请评论或私信,让我们能更好的完善这篇文章,方便大家一起进步。
更多推荐
所有评论(0)