Vue路由创建步骤

路由创建大致分为6步：

1. 定义组件：
   代码示例：

<template id="user">
    <div>
        <h2>user------user------user</h2>
        <h3>path-------{{$route.path}}</h3>
        <h3>query-------{{$route.query}}</h3>
        <h3>params-------{{$route.params}}</h3>
        <h3>name-------{{$route.name}}</h3>
    </div>
</template>
<script>
	const user = {
	  template: "#user"
	}
</script>

2. 定义路由
   代码示例：

const routes = [
    {
        path: '/home/:ids?',
        component: home,
        name: "home"
    },
    {
        path: '/user/:userId',
        component: user,
        name:'user',
        alias: '/b'
    }
]

3. 创建路由实例
   代码示例：

 const router = new VueRouter({
				   routes 				// (缩写) 相当于 routes: routes
				})

4. 创建和挂载实例
   代码示例：

 const vm = new Vue({
	            el: "#box",
	            router,
	        })

5.路由出口

 <!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>

6.路由导航 router-link 跳转
代码示例：

 <router-link to="/">Go to local</router-link>
<router-link to="/home">Go to home</router-link>
<router-link :to="{ name: 'user', params: { userId: 123 }}">Go to user</router-link>