Vuejs2.0学习笔记之vue-router和vue-cli

最新推荐文章于 2024-11-08 13:43:44 发布

weixin_33694620

最新推荐文章于 2024-11-08 13:43:44 发布

阅读量110

点赞数

文章标签： python javascript ViewUI

原文链接：https://my.oschina.net/maliang1989/blog/3017868

版权

2019独角兽企业重金招聘Python工程师标准>>>

vue-router是路径之间的切换，即组件之间的切换。也就是说：将组件Component映射到路由Vue Router，并告诉Vue Router在哪里渲染它们。路由的基本使用：

1. 创建组件
1. 定义Router映射
1. 创建路由实例
1. 将路由实例挂载到元素
1. 在元素上通过<router-link></router-link>以及<router-view></router-view>渲染路由;

事例：

<!-- 
	使用vue.js可以通过组合组件来组成应用程序，当引入vue-router时，
	将组件映射到路由(routes)，然后告诉Vue router在哪里渲染它们(挂载点)
-->
<html>
<head>
	<meta charset="UTF-8">
	<title>hello world</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
   <div id="itany">
       <p>
           <router-link to="/foo">Go to Foo</router-link>
           <router-link to="/bar">Go to Bar</router-link>
       </p>
       <router-view></router-view>
   </div>
   <script type="text/javascript">
   // Step1.定义路由的组件
   const Foo = { template: '<h2>foo</h2>'}
   const Bar = { template: '<h2>bar</h2>'}
   // Step2.定义路由
   const routes = [
       { path: '/foo', component: Foo},
       { path: '/bar', component: Bar}
   ]
   // Step3.创建router实例
   const router = new VueRouter({
       routes:routes
   })
   // Step4.创建和挂载根实例
   const app = new Vue ({
       router:router
   }).$mount('#itany');
   </script>
</body>
</html>

二、路由的嵌套匹配和动态路由，传参

<!--
    使用vue.js可以通过组合组件来组成应用程序，当引入vue-router时，
    将组件映射到路由(routes)，然后告诉Vue router在哪里渲染它们(挂载点)
 -->
<html>
<head>
    <meta charset="UTF-8">
    <title>hello world</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
    <div id="itany">
        <div>
            <router-link to="/home">Home</router-link>
            <router-link to="/user">User</router-link>
        </div>
        <router-view></router-view>
    </div>
    <template id='userId'>
    <div>
        <ul>
        <!-- URL传参和REST传参 -->
        <router-link to="/user/cat?name=maliang&age=18" tag="li">Cat</router-link>
        <router-link to="/user/tom/maliang/18" tag="li">Tom</router-link>
       </ul>
       <router-view></router-view>
    </div>
    </template>

    <script type="text/javascript">
    // Step1.定义路由的组件
    const Home = { template: '<h2>this is home page.</h2>'}
    const User = { template: '#userId'}
    const Path1 = { template: '<h2>this is tom, 获取REST参数：name={{$route.params.name}}, ag={{$route.params.age}}</h2>'}
    const Path2 = { template: '<h2>this is cat, 获取URL参数：name={{$route.query.name}}, age={{$route.query.age}}</h2>'}

    // Step2.定义路由映射组件
    const routes = [
    { 
        path: '/home',
        component: Home
    },
    {
        path: '/user',
        component: User,
        children: [
        {
            path: 'tom/:name/:age',
            component: Path1
        },
        {
            path: 'cat',
            component: Path2
        }
      ]
    }
   ]
    // Step3.创建router实例
    const router = new VueRouter({
        routes:routes,
        linkActiveClass:'active'
    })
    // Step4.创建和挂载根实例
    const app = new Vue ({
        router:router
    }).$mount('#itany');
    </script>
</body>
</html>

备注：