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

原创
2019/03/04 21:51
阅读数 23

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>

备注:

  • 嵌套路由用法
  • URL传参和REST传参的获取方式

三、编程式添加路由和替换路由

  • router.push
  • router.replace
展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部