Vue-router基本使用
一、Vue-router基本使用
1、cmd：npm i vue-router -S
2、引入vue.js
3、引包：核心插件vue-router
4、安装插件`Vue.use(VueRouter);
5、声明路由组件
6、创建路由对象
7、路由匹配规则
8、将配置好的路由对象关联到vue实例化对象中
二、router-link
1、全局组件：router-link、router-view
（1）router-link：默认被渲染成a标签，to默认渲染成href属性 （2）router-view：路由组件的出口
2、to
（1） 帮助我们生成a标签的href
（2）锚点值代码维护不方便，如果需要改变锚点值名称
（3） 则需要改变 [使用次数 + 1（配置规则）] 个地方的代码
三、命名路由
1、给路由对象一个名称 `{ name:'home',path:'/home',component:Home}`
var router = new VueRouter({ // 4.配置路由对象 routes:[ // 路由匹配的规则 { path:'/login', name:'login', component:Login }, { path:'/register', name:'register', component:Register } ] });
2、在router-link的to属性中描述这个规则
<router-link :to="{name:'home'}></router-link>
* 通过名称找路由对象，获取其path，生成自己的href
* 大大降低维护成本，锚点值改变只用在main.js中改变path属性即可
四、路由案例：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>router的使用</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
<!-- 引入vue.js -->
<script src="js/vue.js"></script>
<script src="node_modules/vue-router/dist/vue-router.js"></script>
<script>
// 3、安装插件`Vue.use(VueRouter);
Vue.use(VueRouter);
// 声明路由组件
var Login={
template:`<h2>我是一个登录页面</h2>`
}
var Register={
template:`<h2>我是一个注册页面</h2>`
}
// 创建路由对象
var router=new VueRouter({
// 配置路由对象
routes:[
// 路由匹配规则
{
path:'/login',
// 响应component模板
component:Login
},
{
path:'/register',
component:Register
}
]
});
// 声明局部组件
var App={
template:`
<div>
<router-link to='/login'>登录</router-link>
<router-link to='/register'>注册</router-link>
<router-view></router-view>
</div>
`
};
new Vue({
el:'#app',
router:router,
// 使用局部组件
template:`<App />`,
components:{
// 挂载组件
App
}
});
</script>
