Vue-router路由

菜菜菜鸟日记—Vue-router路由机制（嵌套子菜单实例）

一.了解Vue-router
1.vue-router是vue的一个插件，需要安装使用。将不同的url对应不同的组件 ，比较适合单页面开发。
2.使用cdn引入vue-router插件

     <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.4.3/vue-router.min.js">script>

一.Vue-router基本使用
1.定义组件（最终目的是将路由和组件结合）

<script>
var cheng={
      
             template:`
this is my component
`
         }
script>

2.定义路由

<script>
var router=new VueRouter({
      
            routes:[{
      
                path:'/cheng',
                component:cheng
            },
            {
      
            	path:'/.....',
            	component:.....
            }]
        })
script>

3.将路由挂载到Vue实例

<script>
 new Vue({
      
            el:'#CC',
            router
        });
script>

4.书写模板内容

<div id="app">
        <h1>vue-router页面h1>

        <router-link :to='student'>跳转到student页面router-link>
        <router-link :to=''>跳转到....页面router-link>
        <router-view>router-view>
    div>

5.router-link的几种形式
为方便后期代码维护：router-link内代码也可写成变量形式。

<router-link :to='student'>跳转到student页面router-link>
//Vue实例的data属性中添加student变量值： data: {student: { path: "/student" }},