<template> <div> <h1>{{ msg }}</h1> </div> </template> <script> export default { data() { return { msg: 'I am H1 page,Welcome to H1' } } } </script>
④修改router/index.js代码，子路由的写法是在原有的路由配置下加入children字段。
routes: [
{
path: 'https://www.jb51.net/',
name: 'HelloWorld',
component: HelloWorld,
children: [{path: '/h1', name: 'H1', component: H1},
{path: '/h2', name: 'H2', component: H2}
]
}
]
4.vue-router跳转方法
<button @click="goToMenu">Let's order！</button> ..... <script> export default{ methods:{ goToMenu(){ this.$router.go(-1)//跳转到上一次浏览的页面 this.$router.replace('/menu')//指定跳转的地址 this.$router.replace({name:'menuLink'})// 指定跳转路由的名字下 this.$router.push('/menu')通过push进行跳转 this.$router.push({name:'menuLink'})通过push进行跳转路由的名字下 } } } </script>
5.404页面的设置
用户会经常输错页面，当用户输错页面时，我们希望给他一个友好的提示页面，这个页面就是我们常说的404页面。vue-router也为我们提供了这样的机制。 ①设置我们的路由配置文件（/src/router/index.js）
{ path:'*', component:Error }
这里的path:'*'就是输入地址不匹配时，自动显示出Error.vue的文件内容
②在/src/components/文件夹下新建一个Error.vue的文件。简单输入一些有关错误页面的内容。
<template> <div> <h2>{{ msg }}</h2> </div> </template> <script> export default { data () { return { msg: 'Error:404' } } } </script>
此时我们随意输入一个错误的地址时，便会自动跳转到404页面
总结
以上所述是小编给大家介绍的关于vue-router的那些事儿，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: