vue-router 是vue很重要的组成部分。
1.一般用vue脚手架新建v项目时会选择安装vue-router,没有的话 在项目 目录下执行
sudo cnpm install vue-router 安装
2.在src目录下有router文件夹 有index.js
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
})
当然,以后我们的路由不可能只有这一个,需要换种写法,可以看一下下面的代码与上面的区别。(主要用命名路由)
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Test from '@/components/Test'
// import Login from '@/components/Login'
Vue.use(Router);
//把路由分开,利于整理和一些循环 比如导航菜单...
export const helloRouter=[
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/test',
name: 'Test',
component: Test
}
]
export const loginRouter={
path: '/login',
name: 'Login',
component: () => import('@/components/Login') //省去顶部引入文件
};
export const appRouter=[
...helloRouter,//扩展运算符( spread )是三个点(...)。它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列
loginRouter
]
export default new Router({
routes: appRouter
})
3.<router-view /> 标签 在app.vue 里有<router-view /> 或者是<router-view></router-view>
是让 路由import的vue文件展示到当前位置。
4.动态路由
{path:'item/:id',name:'Item',component:()=>import('@/components/Item')}
获取动态参数:
<h1>动态参数:{{ $route.params.id }}</h1>