vue路由怎么创建
这篇“vue路由怎么创建”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“vue路由怎么创建”文章吧。
成都创新互联专注于网站建设|网站建设维护|优化|托管以及网络推广,积累了大量的网站设计与制作经验,为许多企业提供了网站定制设计服务,案例作品覆盖除甲醛等行业。能根据企业所处的行业与销售的产品,结合品牌形象的塑造,量身定制品质网站。
一、概念
路由用于设定访问路径,并将路径和组件映射起来
一般用Vue做的都是单页应用,只有一个主页面index.html,所以你写的标签是不起作用的,要使用vue-router来进行管理。
二、使用步骤
第一步:安装
npm install vue-router
第二步:在src文件目录下新建一个router文件夹,src/router/index.js,此处就是编写路由组件的地方,这个文件就是路由的核心文件
//该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router"
//引入组件
import About from '../pages/About'
import Home from '../pages/Home'
//创建并暴露一个路由器
const router = new VueRouter({
routes: [
{
path: '/about',
component:About
},
{
path: '/home',
component:Home
}
]
})
export default router
第三步:在入口函数里引入相关路由
import Vue from "vue";
import App from './App.vue'
//引入VueRouter
import VueRouter from 'vue-router'
//引入路由器
import router from './router/index'
Vue.config.productionTip = false
//应用插件
Vue.use(VueRouter)
//创建vue
new Vue({
el: '#app',
render: h => h(App),
router:router
})
第四步:新建两个路由组件 ,一般存放在pages文件夹里面
第五部:配置App组件
vue中借助router-link标签实现路由的切换
active-class:表示当前活跃的路由高亮显示
>About
>
>Home
>
export default {
name: "App",
};
注意点:
路由组件通常存放在pages文件夹里面 ,一般组件通常存放在components文件夹
通过切换,‘隐藏了的路由组件’,默认是被销毁掉的,需要的时候再去挂载
每个组件都有自己的$route属性,里面存储着自己的路由信息
整个应用只有一个router,可以通过组件的$router属性获取到
三、路由嵌套
跳转要加上父亲路径 即:/home/news
路径:children:[
{ path:'news' ,component:News
]
注意path后面不要加 ‘/news’
比如我们要在上面基础步骤里面的home路由组件里面嵌套两个组件
index.js文件:
const router = new VueRouter({
routes: [
{
path: '/about',
component: About
},
{
path: '/home',
component: Home,
children: [
{
path: 'news',
component:News,
},
{
path: 'message',
component:Message,
}
]
}
]
那么home组件的展示区就是嵌套组件的呈现位置
home.vue
Home组件内容
export default {
name: "Home",
};
四、路由命名
作用:可以简化路由的跳转
如何使用:
首先给路由命名
const router = new VueRouter({
routes:[
{
name:'guanyu',
path:'/about',
component:About
}
]
})
简化跳转
首先看下没加命名的跳转:
简化后的,直接通过名字跳转
简化写法搭配传递参数
五、query参数 和 params参数
5.1、路由的query参数
传递参数的方法:
方法一:跳转路由并携带query参数,to的字符串写法
方法二:跳转路由并携带query参数,to的对象写法
:to="{ path:'/home/message/detail', query:{ id:m.id, title:m.title }"> {{m.title}}
接受参数的方法:
detail.vue
$route.query.xx
- 消息编码:{{$route.query.id}}
- 消息编码:{{$route.query.title}}
5.2、路由的params参数
配置路由:
children: [
{
name:'xiangqing',
path: 'detail/:id/:title', //使用占位符声明接受params参数
component: Detail,
}
]
传递参数的方法:
方法一:跳转路由并携带params参数,to的字符串写法
方法二:跳转路由并携带params参数,to的对象写法
特别注意:路由携带params参数时,若使用to的对象写法,则不能使用path配置项,必须使用name配
:to="{ name: 'xiangqing', params: { id: m.id, title: m.title, }, }" > {{ m.title }}
接受参数的方法:
detail.vue
$route.params.xx
- 消息编码:{{$route.params.id}}
- 消息编码:{{$route.params.title}}
六、路由的params配置
当父组件携带参数给子路由的时候,子路由可以直接使用,通过params配置后更加简单
作用:让路由组件更加方便的收到参数
之前的:
现在的:
6.1、方法一
路由配置props 【使用少】
children: [
{
name: 'xiangqing',
path: 'detail/:id/:title', //使用占位符声明接受params参数
component: Detail,
props: { a: '001', b: '你好' }
}
]
值为对象,该对象中的所有key-value都会以props的形式传给Detail组件
路由接受props
路由;
{{a}}
{{b}}
export default {
name: "Detail",
props:['a','b'],
mounted() {
console.log(this.$route);
},
};
6.2、方法二
路由配置props
props值为布尔值,为true的时候,就会把该路由组件收到的多有params参数,以props的形式传给detail组件
path: 'detail/:id/:title' :携带的id和title参数都是跳转路径的时候携带的query参数或params参数
children: [
{
name: 'xiangqing',
path: 'detail/:id/:title', //使用占位符声明接受params参数
component: Detail,
props:true
}
]
路由接受props
- 消息编码:{{id}}
- 消息编码:{{title}}
props:['id','title'],
6.2、方法三
路由配置props
children: [
{
name: 'xiangqing',
path: 'detail', //使用占位符声明接受params参数
component: Detail,
props($route) {
return{
id: $route.query.id,
title:$route.query.title
}
}
}
]
路由接受props
- 消息编码:{{id}}
- 消息编码:{{title}}
props:['id','title'],
七、两个新的生命周期钩子(路由)
作用:路由组件所独有的两个钩子,用于捕获路由组件的激活状态
具体名字:activated 路由组件被激活时触发、deactivted 路由组件失活时触发
即使将news里面的内容缓存起来,在news路由组件失活的时候,定时器也会被关闭,缓存和失活不会相互影响
export default {
name: "News",
data() {
return {
opacity: 1,
};
},
activated() {
this.timter = setInterval(() => {
this.opacity -= 0.01;
if (this.opacity <= 0) this.opacity = 1;
}, 16);
},
deactivated() {
clearInterval(this.timter);
},
};
以上就是关于“vue路由怎么创建”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注创新互联行业资讯频道。
名称栏目:vue路由怎么创建
标题来源:http://scyanting.com/article/ghjghh.html