简单理解（router-vue）路由及嵌套路由

之前写过一篇关于配置路由的博客，那时候还是留有疑问，就想着先记下来。今天又一次写路由我配有详细代码及其解释，希望可以对你们有所帮助！

下面的代码实现功能如下图所示：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>router-vue</title>
//这里是引入的vue.js的包和vue-router.js包
    <script src="js/vue.js"></script>
    <script src="js/vue-router.js"></script>
</head>
<body>
<div id="app">
     <!--路由入口-->
    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
        <router-link to="/angel">天使</router-link>

        <router-link to="/demon">魔鬼</router-link>
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>

</div>
<script>
    //定义组件
    const angel={template:'<div><h1>我是天使</h1></div>'}
    const demon={template:'<div><h2>你是魔鬼</h2>' +
    '<ul><li><router-link to="/demon/demon1">不要</router-link></li></ul>' +
    '<router-view></router-view></div>'}
    const main1={
        template:'<div><h1>我是小可爱</h1></div>'
    }
   //实例化路由对象
    let  c= new VueRouter({
        routes:[
            { path: '/angel', component: angel },
            { path: '/demon', component:demon,
            children:[{path:'/demon/demon1',component:main1}]
            }
        ]
    })
    //在vue实例中配置路由
    let mv = new Vue({
        el:'#app',
        components:{
         Angel:angel,
         Demon:demon,
        },
        router:c
    })

</script>
</body>
</html>

// 如果使用模块化机制编程，需要导入Vue和VueRouter，要调用 Vue.use(VueRouter)

// 1. 定义（路由）组件。
// 可以从其他文件 import 进来

暂且说这么多吧，之后发现什莫新的东西会陆续补上。

yezi__626

发布了79 篇原创文章 · 获赞 36 · 访问量 5万+

私信关注

简单理解（router-vue）路由及嵌套路由

// 如果使用模块化机制编程，需要导入Vue和VueRouter，要调用 Vue.use(VueRouter)

// 1. 定义（路由）组件。 // 可以从其他文件 import 进来

猜你喜欢

// 1. 定义（路由）组件。
// 可以从其他文件 import 进来