Vue路由教程

1.安装路由

　　npm install vue-router

2.在router.js导入vue-router，vue

　　import VueRouter from 'vue-router'

　　import Vue from 'vue'

　　//因为配置路由表的时候，需要用到Main.vue组件，所以需要导入Main.vue

　　import Main from './components/Main.vue';

3.在router.js中导入路由，挂载到Vue程序中

　　Vue.use(VueRouter)

4.router.js -----配置路由表，根据不同的url导航到指定的组件视图

　　使用hash表示路由标识

　　export default  new VueRouter({

　　　　routes: [

　　　　　　{

　　　　　　path:' / ',

　　　　　　component:' Main '

　　　　　　}

　　　　]

　　})

5. 将路由实力配置到根实例（入口文件）的router中

　　//导入路由

　　import router from ‘./router’

　　new  Vue({

　　　　//第二个router就是路由实例的变量接收的router

　　　　router:router

　　})

6.在你的视图中告诉路由往哪里渲染

　　<router-view></router-view>

7.$router和$route的区别

　　$router：是路由对象，一般用于跳转使用

　　　　　　在Vue实例内部，可以通过$router访问路由实例，还可以进行重定向，相当于location.href

　　

　　　

　　$route:　也是路由对象，可以用来获取当前路由路径的参数

　　　　　　可以获取路径的动态参数

　　　　this.$route.params