Vue中路由的配置

vue中路由的使用

 

1.安装：npm install vue-router --save(写入package.json)

2.引入:在router文件夹下的index.js中import Router from 'vue-router'//12在以cli2创建的项目中已经完成

3.引入组件：在router文件夹下的index.js

import HelloWorld from '@/components/HelloWorld' import Home from '@/components/Home'

4.配置路由：在router文件夹下的index.js  

const routes = [ { path: '/home/:aid',//动态路由的配置 name: '123',//命名路由的配置 component: Home }, { path: '/helloword', component: Helloworld }, { path: '*', redirect: '/home' }/*默认跳转路由*/ ]

5.实例化vue-router：在router文件夹下的index.js  

const router = new Router({ mode:"history",//把hash模式改为history模式 routes // （缩写）相当于 routes: routes })

6.暴露模块：在router文件夹下的index.js

export default router

6.挂载：在main.js文件中   

new Vue({ el: '#app', router， render: h => h(App) })

使用

<router-link to='/home'>去home</router-link> this.$router.push({path:'helloworld'}) this.$router.push('/helloworld') this.$router.push({ name: '123' });//命名路由 <router-link to='/home/123'>去home</router-link>//动态路由 <router-link :to="'/home/'+key">去home</router-link>//动态路由 geturl(){ console.log(this.$route.params);//aid:123 } <router-link to='/home?aid=123'>去home</router-link>//get传值 geturl(){ console.log(this.$route.query);//aid:"123" } <router-link :to="'/home?aid='+key">去home</router-link>